ToolBunny LogoToolBunny
Back to Homepage
Gradient Generator

Create and customize CSS gradients visually.

Controls
90°
#ff0000
#0000ff
Preview
Generated CSS
background: ;
About This Tool

The Gradient Generator is an interactive tool for web designers and developers to create beautiful, smooth CSS gradients. It provides a visual editor to control every aspect of the gradient, including the type (linear or radial), angle, and color stops. You can add, remove, and reposition multiple color stops to achieve the perfect blend. Once you have designed your gradient, the tool generates the corresponding CSS `background` code, which can be copied and pasted directly into your stylesheets.

How to Use
  1. Select the gradient type: "Linear" or "Radial".
  2. If you chose "Linear", adjust the "Angle" slider to change the direction of the gradient.
  3. Click on a color swatch to change its color using the color picker.
  4. Drag the slider for each color to change its position (stop) within the gradient.
  5. Click "Add Color" to add a new color stop to the gradient (up to 8 colors).
  6. Click the trash icon next to a color to remove it (a minimum of 2 colors is required).
  7. The preview box at the top right will update in real-time.
  8. When your gradient is ready, click the copy icon in the "Generated CSS" card to copy the code.