CSS Gradients: A Complete Guide with Examples

Published February 10, 2026 · 6 min read

CSS gradients are one of the most powerful visual tools in a web designer's toolkit. They allow you to create smooth color transitions without using images, resulting in faster load times, sharper displays on retina screens, and infinitely customizable designs. This guide covers all three types of CSS gradients with practical, copy-paste examples.

What Are CSS Gradients?

A CSS gradient is a special type of <image> that displays a smooth transition between two or more colors. Gradients are generated by the browser (not loaded as files), so they're resolution-independent and scale perfectly on any screen.

CSS supports three types of gradients:

1. Linear gradients — transition along a straight line
2. Radial gradients — transition from a center point outward
3. Conic gradients — transition around a center point (like a pie chart)

1. Linear Gradients

Linear gradients are the most commonly used type. They create a color transition along a straight line, defined by a direction or angle.

Basic Syntax

background: linear-gradient(direction, color1, color2, ...);

/* Examples */
background: linear-gradient(to right, #6C5CE7, #00D2D3);
background: linear-gradient(135deg, #667eea, #764ba2);
background: linear-gradient(to bottom, #f093fb, #f5576c);

Direction Keywords

• to top — bottom to top (0deg)
• to right — left to right (90deg)
• to bottom — top to bottom (180deg, default)
• to left — right to left (270deg)
• to top right — diagonal

Color Stops

You can control exactly where each color starts and ends:

/* Color at specific positions */
background: linear-gradient(
    to right,
    #ff6b6b 0%,
    #feca57 25%,
    #48dbfb 50%,
    #ff9ff3 75%,
    #54a0ff 100%
);

/* Hard color stops (no blending) */
background: linear-gradient(
    to right,
    #ff6b6b 0%, #ff6b6b 33%,
    #48dbfb 33%, #48dbfb 66%,
    #54a0ff 66%, #54a0ff 100%
);

Repeating Linear Gradients

background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
);

2. Radial Gradients

Radial gradients emanate from a central point outward, creating circular or elliptical color transitions.

Basic Syntax

background: radial-gradient(shape size at position, color1, color2, ...);

/* Examples */
background: radial-gradient(circle, #6C5CE7, #191970);
background: radial-gradient(ellipse at top left, #00D2D3, transparent);
background: radial-gradient(circle at 30% 70%, #f093fb, #f5576c, #0F0F1A);

Shape Options

• circle — perfect circle
• ellipse — ellipse that matches the element's aspect ratio (default)

Size Keywords

• closest-side — gradient ends at the nearest side
• closest-corner — ends at the nearest corner
• farthest-side — ends at the farthest side
• farthest-corner — ends at the farthest corner (default)

3. Conic Gradients

Conic gradients rotate around a center point, like the sweep of a clock hand. They're perfect for pie charts, color wheels, and decorative effects.

background: conic-gradient(from angle at position, color1, color2, ...);

/* Color wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

/* Pie chart */
background: conic-gradient(
    #6C5CE7 0% 40%,
    #00D2D3 40% 70%,
    #ff6b6b 70% 100%
);

Popular Gradient Combinations

Here are some beautiful, production-ready gradients you can copy and use:

/* Sunset */
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);

/* Ocean */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Fresh */
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);

/* Warm */
background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);

/* Night Sky */
background: linear-gradient(135deg, #0c0c1d 0%, #1a1a3e 50%, #6C5CE7 100%);

/* Multi-layer (glassmorphism-style) */
background:
    radial-gradient(circle at 20% 50%, rgba(108,92,231,0.3), transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0,210,211,0.3), transparent 50%),
    #0F0F1A;

Gradient Text

You can apply gradients to text using the background-clip property:

.gradient-text {
    background: linear-gradient(135deg, #6C5CE7, #00D2D3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

This technique is used throughout modern web design for eye-catching headings and brand elements.

Gradient Borders

.gradient-border {
    border: 2px solid transparent;
    background-image:
        linear-gradient(var(--bg), var(--bg)),
        linear-gradient(135deg, #6C5CE7, #00D2D3);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

Performance Tips

• CSS gradients are rendered by the GPU and perform well even on mobile devices
• They have zero network overhead (no image downloads)
• Animating gradient positions can cause repaints — prefer animating opacity or using pseudo-elements
• Complex gradients with many color stops may impact rendering on older devices

Using the CSS Gradient Generator

Writing gradient CSS by hand works, but a visual tool is faster and more intuitive:

1. Open the Wootils CSS Gradient Generator
2. Pick your colors using the color pickers
3. Adjust the angle and direction
4. Preview in real-time
5. Copy the generated CSS code

You might also find the Color Converter and Color Palette Generator useful when designing gradient color schemes.

Browser Support

CSS gradients have excellent browser support in 2026:

• Linear and radial gradients: Supported in all modern browsers since 2012+
• Conic gradients: Supported in Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+
• No prefixes needed: Vendor prefixes (-webkit-) are no longer required for modern browsers

Conclusion

CSS gradients are versatile, performant, and essential for modern web design. Whether you're creating subtle backgrounds, vibrant hero sections, or data visualizations, mastering gradients gives you a powerful creative tool with zero performance cost.

Start experimenting with the CSS Gradient Generator and bring your designs to life.

← Back to blog