CSS Gradients

Master CSS gradients to create beautiful color transitions with linear, radial, and conic gradients for modern web designs.

CSS gradients create smooth transitions between colors. They're used for backgrounds, overlays, and creating visual depth without images.

Linear Gradients

Linear gradients transition colors along a straight line.

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

Basic Linear Gradient

.simple {
  background: linear-gradient(to right, #667eea, #764ba2);
}

.vertical {
  background: linear-gradient(to bottom, #667eea, #764ba2);
}

.diagonal {
  background: linear-gradient(to bottom right, #667eea, #764ba2);
}

Gradient Directions

/* Keywords */
.to-top { background: linear-gradient(to top, red, blue); }
.to-right { background: linear-gradient(to right, red, blue); }
.to-bottom { background: linear-gradient(to bottom, red, blue); }
.to-left { background: linear-gradient(to left, red, blue); }

/* Angles */
.angle-45 { background: linear-gradient(45deg, red, blue); }
.angle-90 { background: linear-gradient(90deg, red, blue); }
.angle-180 { background: linear-gradient(180deg, red, blue); }

Multiple Color Stops

.multi-color {
  background: linear-gradient(
    to right,
    #ff0000,
    #00ff00,
    #0000ff
  );
}

.rainbow {
  background: linear-gradient(
    90deg,
    red, orange, yellow, green, blue, indigo, violet
  );
}

Color Stop Positions

.positioned {
  background: linear-gradient(
    to right,
    #667eea 0%,
    #764ba2 50%,
    #667eea 100%
  );
}

.sharp {
  background: linear-gradient(
    90deg,
    red 0% 50%,
    blue 50% 100%
  );
}

Radial Gradients

Radial gradients radiate from a center point.

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

Basic Radial Gradient

.circle {
  background: radial-gradient(circle, #667eea, #764ba2);
}

.ellipse {
  background: radial-gradient(ellipse, #667eea, #764ba2);
}

Size Keywords

.closest-side {
  background: radial-gradient(closest-side, red, blue);
}

.closest-corner {
  background: radial-gradient(closest-corner, red, blue);
}

.farthest-side {
  background: radial-gradient(farthest-side, red, blue);
}

.farthest-corner {
  background: radial-gradient(farthest-corner, red, blue);
}

Positioning

.positioned {
  background: radial-gradient(
    circle at top left,
    #667eea,
    #764ba2
  );
}

.center-right {
  background: radial-gradient(
    circle at 80% 50%,
    #667eea,
    #764ba2
  );
}

Conic Gradients

Conic gradients rotate around a center point.

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

Basic Conic Gradient

.pie {
  background: conic-gradient(
    red,
    yellow,
    lime,
    aqua,
    blue,
    magenta,
    red
  );
}

.half-circle {
  background: conic-gradient(
    from 0deg,
    red 0deg 180deg,
    blue 180deg 360deg
  );
}

Repeating Gradients

Create patterns with repeating gradients.

Repeating Linear

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #667eea,
    #667eea 10px,
    #764ba2 10px,
    #764ba2 20px
  );
}

.diagonal-lines {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 20px
  );
}

Repeating Radial

.circles {
  background: repeating-radial-gradient(
    circle,
    #667eea,
    #667eea 10px,
    #764ba2 10px,
    #764ba2 20px
  );
}

Practical Examples

Button Gradients

.gradient-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gradient-button:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

Hero Background

.hero {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.9) 0%,
    rgba(118, 75, 162, 0.9) 100%
  ),
  url('hero-image.jpg') center/cover;
  color: white;
  padding: 100px 20px;
}

Card Gradient Border

.gradient-card {
  position: relative;
  background: white;
  padding: 20px;
  border-radius: 10px;
}

.gradient-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

Animated Gradient

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

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Text Gradient

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 3rem;
  font-weight: 900;
}

Glass Morphism

.glass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Loading Bar

.loading-bar {
  height: 4px;
  background: linear-gradient(
    90deg,
    #667eea 0%,
    #764ba2 50%,
    #667eea 100%
  );
  background-size: 200% 100%;
  animation: loading 2s ease-in-out infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Mesh Gradient

.mesh {
  background: 
    radial-gradient(at 0% 0%, #667eea 0px, transparent 50%),
    radial-gradient(at 100% 0%, #764ba2 0px, transparent 50%),
    radial-gradient(at 100% 100%, #667eea 0px, transparent 50%),
    radial-gradient(at 0% 100%, #764ba2 0px, transparent 50%);
}

Gradient Tools & Generators

Popular tools for creating gradients:

CSS Gradient Generator
uiGradients
Grabient
CoolHue
WebGradients

Browser Compatibility

Browser Support

Linear and radial gradients have excellent support. Use vendor prefixes for older browsers:

.gradient {
  background: -webkit-linear-gradient(red, blue);
  background: -moz-linear-gradient(red, blue);
  background: linear-gradient(red, blue);
}

Best Practices

Gradient Best Practices

Use gradients to enhance, not overwhelm designs
Limit to 2-3 colors for clean gradients
Consider accessibility - ensure text contrast
Use gradients for depth and visual interest
Combine with images for rich backgrounds
Animate gradients using background-position
Test gradients on different screens
Provide fallback solid colors
Use subtle gradients for professional look
Consider performance with complex gradients

Performance

Gradients are rendered by the browser (no image downloads)
Complex gradients can impact paint performance
Use simple gradients for better performance
Consider caching for animated gradients

CSS gradients are powerful tools for creating beautiful, modern designs without images!

CSS gradients create smooth transitions between colors. They're used for backgrounds, overlays, and creating visual depth without images.

Linear Gradients

Linear gradients transition colors along a straight line.

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

Basic Linear Gradient

.simple {
  background: linear-gradient(to right, #667eea, #764ba2);
}

.vertical {
  background: linear-gradient(to bottom, #667eea, #764ba2);
}

.diagonal {
  background: linear-gradient(to bottom right, #667eea, #764ba2);
}

Gradient Directions

/* Keywords */
.to-top { background: linear-gradient(to top, red, blue); }
.to-right { background: linear-gradient(to right, red, blue); }
.to-bottom { background: linear-gradient(to bottom, red, blue); }
.to-left { background: linear-gradient(to left, red, blue); }

/* Angles */
.angle-45 { background: linear-gradient(45deg, red, blue); }
.angle-90 { background: linear-gradient(90deg, red, blue); }
.angle-180 { background: linear-gradient(180deg, red, blue); }

Multiple Color Stops

.multi-color {
  background: linear-gradient(
    to right,
    #ff0000,
    #00ff00,
    #0000ff
  );
}

.rainbow {
  background: linear-gradient(
    90deg,
    red, orange, yellow, green, blue, indigo, violet
  );
}

Color Stop Positions

.positioned {
  background: linear-gradient(
    to right,
    #667eea 0%,
    #764ba2 50%,
    #667eea 100%
  );
}

.sharp {
  background: linear-gradient(
    90deg,
    red 0% 50%,
    blue 50% 100%
  );
}

Radial Gradients

Radial gradients radiate from a center point.

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

Basic Radial Gradient

.circle {
  background: radial-gradient(circle, #667eea, #764ba2);
}

.ellipse {
  background: radial-gradient(ellipse, #667eea, #764ba2);
}

Size Keywords

.closest-side {
  background: radial-gradient(closest-side, red, blue);
}

.closest-corner {
  background: radial-gradient(closest-corner, red, blue);
}

.farthest-side {
  background: radial-gradient(farthest-side, red, blue);
}

.farthest-corner {
  background: radial-gradient(farthest-corner, red, blue);
}

Positioning

.positioned {
  background: radial-gradient(
    circle at top left,
    #667eea,
    #764ba2
  );
}

.center-right {
  background: radial-gradient(
    circle at 80% 50%,
    #667eea,
    #764ba2
  );
}

Conic Gradients

Conic gradients rotate around a center point.

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

Basic Conic Gradient

.pie {
  background: conic-gradient(
    red,
    yellow,
    lime,
    aqua,
    blue,
    magenta,
    red
  );
}

.half-circle {
  background: conic-gradient(
    from 0deg,
    red 0deg 180deg,
    blue 180deg 360deg
  );
}

Repeating Gradients

Create patterns with repeating gradients.

Repeating Linear

.stripes {
  background: repeating-linear-gradient(
    45deg,
    #667eea,
    #667eea 10px,
    #764ba2 10px,
    #764ba2 20px
  );
}

.diagonal-lines {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 20px
  );
}

Repeating Radial

.circles {
  background: repeating-radial-gradient(
    circle,
    #667eea,
    #667eea 10px,
    #764ba2 10px,
    #764ba2 20px
  );
}

Practical Examples

Button Gradients

.gradient-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gradient-button:hover {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

Hero Background

.hero {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.9) 0%,
    rgba(118, 75, 162, 0.9) 100%
  ),
  url('hero-image.jpg') center/cover;
  color: white;
  padding: 100px 20px;
}

Card Gradient Border

.gradient-card {
  position: relative;
  background: white;
  padding: 20px;
  border-radius: 10px;
}

.gradient-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 2px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

Animated Gradient

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

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Text Gradient

.gradient-text {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 3rem;
  font-weight: 900;
}

Glass Morphism

.glass {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Loading Bar

.loading-bar {
  height: 4px;
  background: linear-gradient(
    90deg,
    #667eea 0%,
    #764ba2 50%,
    #667eea 100%
  );
  background-size: 200% 100%;
  animation: loading 2s ease-in-out infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Mesh Gradient

.mesh {
  background: 
    radial-gradient(at 0% 0%, #667eea 0px, transparent 50%),
    radial-gradient(at 100% 0%, #764ba2 0px, transparent 50%),
    radial-gradient(at 100% 100%, #667eea 0px, transparent 50%),
    radial-gradient(at 0% 100%, #764ba2 0px, transparent 50%);
}

Gradient Tools & Generators

Popular tools for creating gradients:

CSS Gradient Generator
uiGradients
Grabient
CoolHue
WebGradients

Browser Compatibility

Browser Support

Linear and radial gradients have excellent support. Use vendor prefixes for older browsers:

.gradient {
  background: -webkit-linear-gradient(red, blue);
  background: -moz-linear-gradient(red, blue);
  background: linear-gradient(red, blue);
}

Best Practices

Gradient Best Practices

Use gradients to enhance, not overwhelm designs
Limit to 2-3 colors for clean gradients
Consider accessibility - ensure text contrast
Use gradients for depth and visual interest
Combine with images for rich backgrounds
Animate gradients using background-position
Test gradients on different screens
Provide fallback solid colors
Use subtle gradients for professional look
Consider performance with complex gradients

Performance

Gradients are rendered by the browser (no image downloads)
Complex gradients can impact paint performance
Use simple gradients for better performance
Consider caching for animated gradients

CSS gradients are powerful tools for creating beautiful, modern designs without images!

CSS Gradients

On this page

CSS Gradients

On this page