Gradient Generator

Create beautiful CSS gradients for your projects

90°

Click on Color box to change it's color

CSS Code:

background: linear-gradient(90deg, #ff0000, #0000ff);

Hex Colors:

#ff0000, #0000ff

Popular Gradient Presets

About CSS Gradients

CSS gradients let you create smooth transitions between two or more colors, replacing images with dynamic color effects that scale perfectly and reduce page load times.

How Gradients Work

Gradients work by interpolating color values between specified color stops. The browser calculates intermediate colors using color space interpolation, typically in the sRGB color space. Each gradient type (linear, radial, conic) follows mathematical formulas to determine how colors transition across the element's area.

The Math Behind Gradients

For a linear gradient at 90deg between red (#FF0000) and blue (#0000FF):

  1. The gradient line runs vertically (90° from top)
  2. At each point along this line, colors are mixed using:
    color = color1 × (1 - p) + color2 × p
    where p is the position percentage (0 to 1)
  3. For multiple stops, this calculation segments between adjacent colors

Example #1: Simple Linear Gradient

From red to blue at 45 degrees:

background: linear-gradient(45deg, #FF0000, #0000FF);

This creates a diagonal color transition where:

  • Top-left is pure red (#FF0000)
  • Bottom-right is pure blue (#0000FF)
  • Midpoints show blended purple hues

Example #2: Complex Radial Gradient

Three-color radial gradient:

background: radial-gradient(circle, #FF0000 0%, #FFFF00 50%, #00FF00 100%);

This creates:

  • Red center (0%)
  • Yellow midpoint (50%)
  • Green outer edge (100%)
  • Smooth transitions between each color stop

Example #3: Conic Gradient Clock

12-color conic gradient mimicking a clock face:

background: conic-gradient(
                    #FF0000 0% 8.33%,
                    #FF7F00 8.33% 16.66%,
                    #FFFF00 16.66% 25%,
                    #7FFF00 25% 33.33%,
                    #00FF00 33.33% 41.66%,
                    #00FF7F 41.66% 50%,
                    #00FFFF 50% 58.33%,
                    #007FFF 58.33% 66.66%,
                    #0000FF 66.66% 75%,
                    #7F00FF 75% 83.33%,
                    #FF00FF 83.33% 91.66%,
                    #FF007F 91.66% 100%
                );

This creates a full color wheel with 12 distinct segments, each covering 30° (8.33%) of the circle.

Common Gradient Applications

  • Buttons: Add depth with subtle gradients
  • Backgrounds: Create modern, non-flat designs
  • Text: Apply gradient color effects
  • Data Visualization: Represent value scales
  • UI Elements: Progress bars, loaders, etc.

Gradients reduce HTTP requests compared to image files and adapt perfectly to any screen size.

Gradient Generator FAQ

How many color stops can I use?

There's no technical limit, but browsers typically handle up to 16,000 stops. For performance, we recommend using 2-5 stops.

Can I use transparency in gradients?

Yes! Use rgba() or hsla() color values with alpha channels (e.g., rgba(255,0,0,0.5) for semi-transparent red).

What's the difference between linear and radial gradients?

Linear gradients transition colors along a straight line, while radial gradients radiate outward from a center point.

Why isn't my gradient blending smoothly?

Ensure color stops aren't too close together (minimum 5-10% difference) and check for identical colors at adjacent stops.

Are gradients supported in all browsers?

Modern browsers fully support CSS gradients. For IE9 and below, provide a fallback solid color.