How to Create a CSS Gradient

What Is a CSS Gradient?

A CSS gradient is a value for the background-image property that generates a smooth color transition entirely in the browser — no image download required. Gradients are resolution-independent, meaning they look crisp on any screen density, and they're animatable with CSS transitions.

CSS defines three gradient functions:

• linear-gradient() — transitions along a straight line
• radial-gradient() — transitions outward from a center point
• conic-gradient() — transitions around a center point (like a pie chart)

Each function also has a repeating- variant (repeating-linear-gradient(), etc.) that tiles the gradient pattern.

Linear Gradients

The most common CSS gradient type. The syntax is:

background-image: linear-gradient(direction, color-stop-1, color-stop-2, ...);

Direction options

• to bottom — top to bottom (default if omitted)
• to right — left to right
• to bottom right — diagonal
• 45deg — any angle in degrees (0deg = bottom to top, 90deg = left to right)

Examples

/* Classic top-to-bottom blue gradient */
background-image: linear-gradient(to bottom, #1a73e8, #0d47a1);

/* Diagonal sunset */
background-image: linear-gradient(135deg, #f093fb, #f5576c);

/* Three-color rainbow strip */
background-image: linear-gradient(to right, #667eea, #764ba2, #f093fb);

/* Angle-based */
background-image: linear-gradient(45deg, #43cea2, #185a9d);

Color stops with positions

You can control exactly where each color starts and ends using percentages or lengths:

/* Red for first 30%, then transitions to blue */
background-image: linear-gradient(to right, red 30%, blue 70%);

/* Hard stop — no transition */
background-image: linear-gradient(to right, red 50%, blue 50%);

Hard stops (where two positions are identical) are the key to creating striped effects, which is how CSS-only flags and patterns are made.

Radial Gradients

Radial gradients emanate from a central point and expand outward. The syntax is:

background-image: radial-gradient(shape size at position, color-stop-1, color-stop-2);

Shape and size keywords

• Shape: ellipse (default) or circle
• Size: farthest-corner (default), closest-corner, farthest-side, closest-side
• Position: at center (default), at top left, at 30% 70%

Examples

/* Soft glow from center */
background-image: radial-gradient(circle at center, #ffe259, #ffa751);

/* Spotlight effect from top-left */
background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.3), transparent);

/* Elliptical from custom position */
background-image: radial-gradient(ellipse at 70% 50%, #a8edea, #fed6e3);

Conic Gradients

Conic gradients rotate around a center point — the angle changes, not the distance. They're perfect for pie charts, color wheels, and spinning loader animations.

/* Pie chart: 25% red, 50% blue, 25% green */
background-image: conic-gradient(red 90deg, blue 90deg 270deg, green 270deg);

/* Full color wheel */
background-image: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

/* Offset starting angle */
background-image: conic-gradient(from 45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);

Conic gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge) but not in Internet Explorer.

Advanced Gradient Techniques

Multiple gradients (layering)

You can stack multiple gradients using comma separation. The first listed appears on top:

background-image:
  linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
  linear-gradient(135deg, #667eea, #764ba2);

This is commonly used to darken a gradient for better text contrast.

Gradient text

.gradient-text {
  background-image: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

This technique clips the gradient to the text shape — widely used for eye-catching headings.

Animated gradients

CSS cannot directly animate gradient color stops, but you can animate background-position on a larger-than-element gradient to simulate animation:

.animated {
  background: linear-gradient(270deg, #ee7752, #e73c7e, #23a6d5);
  background-size: 300% 300%;
  animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Gradient Best Practices

• Always provide a fallback — set background-color before background-image so browsers that don't support gradients show a solid color.
• Use the Color Converter to find the right color values before building your gradient.
• Test contrast — gradients with text on top need sufficient contrast at both the light and dark ends. Ensure WCAG AA compliance across the full range.
• Avoid too many color stops — more than four stops often creates visual noise. Clean gradients usually use two to three colors.
• Prefer HSL colors in gradients — changing lightness or saturation within the same hue creates natural-looking progressions.
• Use a generator for complex gradients — the ToolsBox CSS Gradient Generator lets you preview and tweak gradients visually before copying the finished CSS.

Browser Support and Vendor Prefixes

All modern browsers support linear-gradient() and radial-gradient() without vendor prefixes. The -webkit- prefix was required in older versions of Safari (pre-2013) and Chrome. If you must support legacy browsers, add:

background: #667eea; /* fallback */
background: -webkit-linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(to right, #667eea, #764ba2);

For most projects targeting browsers from 2015 onward, the unprefixed syntax is sufficient. You can also use the CSS Minifier to compress your stylesheet once you have your gradients finalized.

Frequently Asked Questions

How do I add a CSS gradient to a background?

Use the background-image property with the gradient function: background-image: linear-gradient(to right, #667eea, #764ba2); Gradients are images in CSS, so they go on background-image, not background-color. You can also use the shorthand background property.

Can I use multiple gradients on one element?

Yes. CSS allows multiple background-image layers separated by commas, so you can stack gradients and even combine them with image URLs. Each layer is rendered from top to bottom, so the first gradient in the list appears on top.

What is the difference between linear-gradient and radial-gradient?

A linear-gradient transitions colors along a straight line from one side or angle to another. A radial-gradient transitions colors outward from a center point in an elliptical or circular shape. Use linear for directional effects and radial for spotlight or glow effects.

Why does my CSS gradient not show in older browsers?

CSS gradients have been supported in all major browsers since around 2012 without vendor prefixes. If you need to support very old browsers, add a solid color fallback using the background-color property before the background-image declaration.