How to Use the CSS Gradient Generator

This tool helps you build beautiful linear, radial, and conic gradients with multiple color stops — and copy the exact CSS with one click.

Follow these steps:

1. Choose a Gradient Type

At the top of the left panel, select:

• Linear Gradient
  
• Radial Gradient
  
• Conic Gradient
  

The preview updates instantly.

👉 Linear is best for buttons, hero sections, backgrounds.
👉 Radial is great for soft glowing effects.
👉 Conic is perfect for modern, expressive UI or charts.

2. Adjust the Gradient Angle (optional)

If you choose Linear or Conic, you will see angle controls:

• Drag the slider
  
• Or type an exact degree (0–360)
  

Examples:

• 90° → gradient flows left to right
  
• 180° → top to bottom
  
• 135° → diagonal (popular)
  

Radial gradients do not use angle, so this field hides automatically.

3. Add or Edit Color Stops

Each gradient is made up of color stops.

For each stop:

• Click the color box to choose a color
  
• Enter a position (0–100%)
  
• Use the slider for quick adjustments
  
• Click ❌ to remove a stop
  

You can add up to 8 color stops for advanced effects.

Examples:

• #ff6b6b 0%
  
• #6366f1 50%
  
• #22c55e 100%
  

The gradient updates in real time.

4. Add New Color Stops

Click “Add color stop” to insert additional colors.

The tool automatically places the new stop at a logical position based on previous stops.

5. Preview Your Gradient

On the right side, you’ll see a large live preview box.

You can change:

• Type
  
• Colors
  
• Stops
  
• Angle
  

…and the preview updates instantly.

Use this to visualize exactly how the gradient will look in UI, backgrounds, cards, buttons, hero banners, etc.

6. Copy the CSS Code

Below the preview, you’ll see the generated CSS:

background-image: linear-gradient(135deg, #ff6b6b 0%, #6366f1 50%, #22c55e 100%);

Click “Copy CSS” to copy the code.

Paste it into:

• CSS files
  
• Tailwind @layer custom classes
  
• Inline styles
  
• Divi / Elementor custom CSS
  
• React components
  
• Figma prototype code snippets
  

Works everywhere CSS is accepted.

7. Use the CSS

Example usage:

.button {

  background-image: linear-gradient(135deg, #ff6b6b 0%, #6366f1 50%, #22c55e 100%);

}

Or inline:

<div style=”background-image: linear-gradient(135deg, #ff6b6b, #6366f1);”>

✔ Done!

You’ve created a custom gradient and copied the exact CSS needed to implement it in your project.

This tool saves time for:

• Web developers
  
• UI/UX designers
  
• Figma designers exporting to CSS
  
• WordPress builders
  
• Shopify theme developers
  
• Graphic designers
  
• Branding teams
  
• Front-end beginners