Gradient Generator

What is a CSS Gradient?

A CSS gradient is a smooth transition between two or more colors, created entirely with CSS without needing image files. Gradients can be linear (along a straight line) or radial (emanating from a center point), and are commonly used for backgrounds, overlays, and design accents.

Types of Gradients

Linear Gradients

Linear gradients transition colors along a straight line at a specified angle:

• 0°: Bottom to top
• 90°: Left to right
• 180°: Top to bottom
• 270°: Right to left
• Any angle from 0-360° for custom directions

Radial Gradients

Radial gradients transition colors from a center point outward in a circular or elliptical shape:

• Circle: Perfect circular gradient
• Ellipse: Oval-shaped gradient that adapts to element dimensions

How to Use This Tool

Create a Linear Gradient

1. Select Linear gradient type
2. Adjust the angle slider (0-360°) to set the direction
3. Click on color stops in the visual track to edit them
4. Modify the color using the color picker or HEX input
5. Adjust the position (0-100%) to move the color stop
6. Click + Add Stop to add more colors (up to 6 total)
7. Click × Remove to delete unwanted color stops (minimum 2)
8. Click Copy CSS or Copy Tailwind to copy the code

Create a Radial Gradient

1. Select Radial gradient type
2. Choose a shape (circle or ellipse)
3. Follow steps 3-8 above for color stops

Tips for Creating Great Gradients

• Start with 2-3 colors: Simple gradients often look cleaner than complex ones
• Use analogous colors: Colors next to each other on the color wheel create harmonious gradients
• Adjust position carefully: Moving stops closer creates sharper transitions, farther creates smoother blends
• Try different angles: For linear gradients, diagonal angles (45°, 135°, 225°, 315°) often look modern
• Use the Randomize button: Get inspiration from randomly generated color combinations
• Consider contrast: Ensure text is readable if using the gradient as a background

Understanding Color Stops

Color stops define where each color appears in the gradient:

• Position 0%: Start of the gradient
• Position 50%: Middle of the gradient
• Position 100%: End of the gradient

You can place stops anywhere between 0-100%. The browser automatically blends colors between stops.

Example Color Stop Patterns

• Even spacing (0%, 50%, 100%): Smooth, balanced transition
• Clustered stops (0%, 10%, 20%): Sharp color changes at one end
• Centered emphasis (0%, 45%, 55%, 100%): Creates a band of color in the middle

Using the Generated CSS

Standard CSS

Copy the CSS snippet and apply it to any element:

.my-element {
  background-image: linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%);
}

Tailwind CSS

Use the Tailwind arbitrary value syntax:

<div class="bg-[linear-gradient(90deg,#ff6b6b_0%,#4ecdc4_100%)]">
  Content here
</div>

Or create a custom utility in your tailwind.config.js:

theme: {
  extend: {
    backgroundImage: {
      'my-gradient': 'linear-gradient(90deg, #ff6b6b 0%, #4ecdc4 100%)',
    }
  }
}

Then use: <div class="bg-my-gradient">...</div>

Common Use Cases

• Hero sections: Eye-catching backgrounds for landing pages
• Buttons and CTAs: Add depth and visual interest
• Card overlays: Subtle gradients over images for text readability
• Navigation bars: Modern gradient backgrounds
• Dividers: Gradient borders or horizontal rules
• Loading states: Animated gradient backgrounds
• Brand elements: Consistent gradient styles across your design