CSS Gradient Generator: Create Linear, Radial, and Conic Gradients

CSS gradients eliminate the need for gradient images, reducing HTTP requests and enabling smooth scaling at any resolution. But writing gradient syntax by hand is tedious. Color stop positions, angle calculations, and radial sizing are difficult to visualize in code alone. A visual generator lets you design gradients intuitively and export clean CSS.

Gradient Types

Linear Gradient

Colors transition along a straight line at a specified angle.

background: linear-gradient(135deg, #6750A4, #E8DEF8);

• Angle: 0deg goes bottom-to-top, 90deg goes left-to-right, 135deg goes top-left to bottom-right
• Direction keywords: to right, to bottom left, to top
• Color stops: Any number of colors with optional position percentages
• Best for: Hero backgrounds, card overlays, section dividers, button backgrounds

Radial Gradient

Colors radiate outward from a center point in a circular or elliptical shape.

background: radial-gradient(circle at center, #6750A4, #E8DEF8);

• Shape: circle or ellipse (default is ellipse)
• Position: at center, at top left, at 30% 70%
• Size keywords: closest-side, farthest-corner, etc.
• Best for: Spotlight effects, ambient backgrounds, vignettes, glow effects behind elements

Conic Gradient

Colors transition around a center point like a pie chart or color wheel.

background: conic-gradient(from 0deg, #6750A4, #E8DEF8, #6750A4);

• Starting angle: from 90deg rotates the starting point
• Center position: at 50% 50% (default is center)
• Repeating: Use repeating-conic-gradient() for patterns
• Best for: Pie charts, color wheels, loading indicators, decorative patterns

How to Use Our Gradient Generator

1. Select a gradient type (linear, radial, or conic)
2. Add color stops by picking colors and adjusting their positions
3. Set the angle or direction for linear gradients, or the center and shape for radial
4. Preview the gradient in real time as you make adjustments
5. Copy the CSS with one click and paste it into your stylesheet

The generator produces standard CSS that works in all modern browsers without vendor prefixes.

Practical Gradient Techniques

Smooth Multi-Color Gradients

Adding a mid-point color between two contrasting colors prevents the muddy gray zone that appears when complementary colors blend directly.

/* Muddy transition */
background: linear-gradient(90deg, #6750A4, #A4A750);

/* Clean transition with mid-point */
background: linear-gradient(90deg, #6750A4, #8888CC, #A4A750);

Overlay Gradients on Images

Use a semi-transparent gradient over a background image to improve text readability:

background:
  linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7)),
  url('hero.jpg');

This darkens the bottom of the image where text typically sits without obscuring the image entirely.

Subtle Background Depth

Instead of a flat background color, add a barely visible gradient for visual depth:

background: linear-gradient(
  135deg,
  #FFFBFE 0%,
  #F3EDF7 50%,
  #FFFBFE 100%
);

The difference is subtle but adds a sense of light source and dimension that flat colors lack.

Repeating Gradients for Patterns

Create stripes, dots, and geometric patterns without images:

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #6750A4 0px,
  #6750A4 10px,
  #E8DEF8 10px,
  #E8DEF8 20px
);

Border Gradients

CSS does not support gradients directly on borders, but you can fake it using a background gradient on a wrapper with padding:

.gradient-border {
  background: linear-gradient(135deg, #6750A4, #7D5260);
  padding: 2px;
  border-radius: 24px;
}
.gradient-border-inner {
  background: #FFFBFE;
  border-radius: 22px;
  padding: 24px;
}

Performance Considerations

• CSS gradients render on the GPU and perform well at any size
• Gradients with many color stops (10+) may impact rendering performance on lower-end devices
• Animating gradient positions is expensive. Prefer animating opacity of layered gradient elements instead
• Use will-change: background sparingly and only when animating

Browser Support

Linear and radial gradients are supported in all modern browsers without prefixes. Conic gradients are supported in Chrome, Edge, Safari, and Firefox. No vendor prefixes are needed for current browser versions.

Frequently Asked Questions

How many color stops can I use? CSS supports unlimited color stops, but 2-5 colors typically produce the best results. More stops give you finer control but increase complexity. Beyond 5-6 stops, consider whether an image or SVG would be simpler to maintain.

Can I animate CSS gradients? Not directly with CSS transitions. The background property with gradients is not smoothly animatable. Workarounds include transitioning the opacity of overlapping gradient layers or using CSS custom properties (variables) with @property to animate individual color stop values.

What is the difference between to right and 90deg? They are equivalent for linear gradients. to right is a direction keyword, and 90deg is the same direction expressed as an angle. Keywords are more readable; angles are more precise for non-cardinal directions like 135deg.

Why does my gradient look banded? Color banding occurs when the gradient spans a large area with a small color difference. Adding a subtle noise texture overlay or using more color stops with slight variation can reduce banding. Some browsers handle this better than others.

Do gradients work with transparency? Yes. Use rgba() or hsla() color values, or the modern rgb(255 87 51 / 50%) syntax, to include transparent stops. This is essential for image overlays and fade effects.

---

Try our free CSS Gradient Generator to create beautiful gradients visually.