CSS Gradients

Learn how to create beautiful gradient effects using CSS gradient functions

What are CSS Gradients?

CSS gradients let you display smooth transitions between two or more specified colors. Unlike images, gradients are generated by the browser and can be scaled indefinitely without losing quality.

Gradient Types:

  • Linear Gradients - Colors transition along a straight line
  • Radial Gradients - Colors transition outward from a center point
  • Conic Gradients - Colors transition around a center point
  • Repeating Gradients - Repeating patterns of gradients
Linear
Radial
Conic
Repeating
CSS Gradients

CSS Gradient Properties Reference

FunctionDescriptionSyntax
linear-gradient()Creates a linear gradient along a straight linelinear-gradient([direction], color-stop1, color-stop2, ...)
radial-gradient()Creates a radial gradient radiating from a center pointradial-gradient([shape] [at position], color-stop1, color-stop2, ...)
conic-gradient()Creates a conic gradient rotated around a center pointconic-gradient([from angle] [at position], color-stop1, color-stop2, ...)
repeating-linear-gradient()Repeats a linear gradientrepeating-linear-gradient([direction], color-stop1, color-stop2, ...)
repeating-radial-gradient()Repeats a radial gradientrepeating-radial-gradient([shape] [at position], color-stop1, color-stop2, ...)
repeating-conic-gradient()Repeats a conic gradientrepeating-conic-gradient([from angle] [at position], color-stop1, color-stop2, ...)

CSS Gradients in Action

Example Code

/* CSS Gradient Properties */

/* Linear Gradient */
.linear {
  background: linear-gradient(to right, red, blue);
  background: linear-gradient(45deg, red, blue);
  background: linear-gradient(to bottom right, red, blue);
  background: linear-gradient(180deg, red, blue);
}

/* Radial Gradient */
.radial {
  background: radial-gradient(circle, red, blue);
  background: radial-gradient(ellipse, red, blue);
  background: radial-gradient(circle at top left, red, blue);
  background: radial-gradient(farthest-corner, red, blue);
}

/* Conic Gradient */
.conic {
  background: conic-gradient(red, blue);
  background: conic-gradient(from 45deg, red, blue);
  background: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 270deg, yellow 270deg 360deg);
  background: conic-gradient(at center, red, blue);
}

/* Repeating Gradients */
.repeating {
  background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
  background: repeating-radial-gradient(circle, red, red 10px, blue 10px, blue 20px);
  background: repeating-conic-gradient(red 0deg 10deg, blue 10deg 20deg);
}

/* Multiple Color Stops */
.multiple-stops {
  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  background: radial-gradient(circle, red 0%, orange 20%, yellow 40%, green 60%, blue 80%, indigo 100%);
}

/* Gradient with Transparency */
.transparency {
  background: linear-gradient(to right, rgba(255,0,0,0.5), rgba(0,0,255,0.5));
  background: radial-gradient(circle, rgba(255,0,0,0.8), rgba(0,0,255,0.2));
}

/* Hard Color Stops */
.hard-stops {
  background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);
  background: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg 270deg, yellow 270deg 360deg);
}

/* Using Gradients with Background Properties */
.combined {
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('image.jpg') center/cover;
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Gradient Borders */
.gradient-border {
  border: 5px solid;
  border-image: linear-gradient(to right, red, blue) 1;
}

/* Gradient Shadows */
.gradient-shadow {
  box-shadow: 0 10px 20px rgba(255,0,0,0.5), 0 6px 6px rgba(0,0,255,0.5);
}

Gradient Types in Detail

Linear Gradients

Linear gradients transition colors along a straight line. You can specify the direction using keywords, angles, or side corners.

/* Keyword direction */
background: linear-gradient(to right, red, blue);

/* Angle direction */
background: linear-gradient(45deg, red, blue);

/* Multiple color stops */
background: linear-gradient(to right, red, orange, yellow, green, blue);

Radial Gradients

Radial gradients transition colors outward from a center point. You can specify the shape, size, and position of the gradient.

/* Basic radial gradient */
background: radial-gradient(circle, red, blue);

/* Positioned radial gradient */
background: radial-gradient(circle at top left, red, blue);

/* Sized radial gradient */
background: radial-gradient(farthest-corner, red, blue);

Conic Gradients

Conic gradients transition colors rotated around a center point. You can specify the starting angle and position.

/* Basic conic gradient */
background: conic-gradient(red, blue);

/* With starting angle */
background: conic-gradient(from 45deg, red, blue);

/* With color stops */
background: conic-gradient(red 0deg 90deg, blue 90deg 180deg);

Repeating Gradients

Repeating gradients create patterns by repeating the specified gradient. They're useful for creating striped or patterned backgrounds.

/* Repeating linear gradient */
background: repeating-linear-gradient(45deg, red, red 5px, blue 5px, blue 10px);

/* Repeating radial gradient */
background: repeating-radial-gradient(circle, red, red 5px, blue 5px, blue 10px);

/* Repeating conic gradient */
background: repeating-conic-gradient(red 0deg 10deg, blue 10deg 20deg);

Advanced Gradient Techniques

Gradient Text

You can apply gradients to text using background-clip property. Note that this requires the -webkit- prefix for WebKit browsers.

.gradient-text {
background: linear-gradient(to right, red, blue);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
Gradient Text Effect

Gradient Borders

You can create gradient borders using the border-image property with a gradient.

.gradient-border {
border: 5px solid;
border-image: linear-gradient(to right, red, blue) 1;
}
This element has a gradient border

Gradient Overlays

You can combine gradients with background images to create overlay effects.

.overlay {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('image.jpg') center/cover;
}
Gradient Overlay Example

Gradient Shadows

While not true gradients, you can simulate gradient effects with multiple box-shadows.

.gradient-shadow {
box-shadow:
0 10px 20px rgba(255,0,0,0.5),
0 6px 6px rgba(0,0,255,0.5);
}
This element has gradient-like shadows

Browser Support

Gradient TypeChromeFirefoxSafariEdge
Linear Gradients26.0+16.0+6.1+12.0+
Radial Gradients26.0+16.0+6.1+12.0+
Conic Gradients69.0+83.0+12.1+79.0+
Repeating Linear26.0+16.0+6.1+12.0+
Repeating Radial26.0+16.0+6.1+12.0+
Repeating Conic69.0+83.0+12.1+79.0+

Notes:

  • Most modern browsers support all gradient types
  • For older browsers, consider using fallback background colors or images
  • Conic gradients have relatively newer support
  • Check caniuse.com for detailed browser compatibility

Practical Gradient Examples

Button with Gradient

.btn-gradient {
background: linear-gradient(to right, #3498db, #2980b9);
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}

Card with Gradient Background

.gradient-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
This is a card with a gradient background

Animated Gradient

.animated-gradient {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}

@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
< PreviousNext >