Introduction: A tool for creating and managing CSS gradients with advanced customization options.
Added on: Jan 20, 2025
Gradient Generator

What is Gradient Generator

The CSS Gradient Generator is a comprehensive application designed to help users create and manage CSS gradients. It consists of four main parts: the gradient list, layer settings panel, main board, and library. Users can manage gradient layers, customize gradient settings, and save their work to a library for future use.

How to Use Gradient Generator

  1. Gradient List: On the left side, you can manage gradient layers, including their order, visibility, and deletion. Clicking a layer opens its settings panel.
  2. Layer Settings Panel: Customize gradient type, size, repeatability, transparency, and blend mode. Use the gradient slider to add, move, or select points.
  3. Main Board: Set the focal point, direction, and position of the gradient. Switch between modes using keys (Q, W, E) or mouse buttons.
  4. Library: Save your work to the library and access saved gradients. Manage library groups, import/export elements, and explore an online library for shared gradients.

Features of Gradient Generator

  • Gradient List

    Manage gradient layers, including order, visibility, and deletion. Clicking a layer opens its settings panel.

  • Layer Settings Panel

    Customize gradient type, size, repeatability, transparency, and blend mode. Use the gradient slider to add, move, or select points.

  • Main Board

    Set the focal point, direction, and position of the gradient. Switch between modes using keys (Q, W, E) or mouse buttons.

  • Library

    Save your work to the library and access saved gradients. Manage library groups, import/export elements, and explore an online library for shared gradients.

FAQs from Gradient Generator

1

How do I add a new point to the gradient slider?

Double-click on a given point of the slider to add a new point.
2

Can I move points on the gradient slider?

Yes, you can move points using the mouse or Arrow keys. You can also select multiple points by holding the Ctrl key.
3

How do I save my work to the library?

Once you have added at least one layer to your work, you can save the entire current work to the library by clicking the save button.
4

Can I import gradients from other users?

Yes, you can import elements from the online library, which contains gradients created by other users.