CSS Gradient Tutorial: From Basic to Beautiful in 10 Minutes

# CSS Gradient Tutorial: From Basic to Beautiful in 10 Minutes

Ready to create stunning gradients for your web projects? This hands-on tutorial walks you through everything from basic linear gradients to advanced multi-layer effects. Follow along with our CSS Gradient Generator for instant visual feedback.

Step 1: Your First Linear Gradient

Let's start with the basics. A linear gradient transitions colors along a straight line.

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

This creates a horizontal gradient from purple to dark purple. Simple but effective.

Step 2: Controlling Direction

Using Keywords

/* Four primary directions */
background: linear-gradient(to top, #667eea, #764ba2);
background: linear-gradient(to right, #667eea, #764ba2);
background: linear-gradient(to bottom, #667eea, #764ba2);
background: linear-gradient(to left, #667eea, #764ba2);
/* Diagonal */
background: linear-gradient(to bottom right, #667eea, #764ba2);

Using Angles

For precise control, use degrees:

background: linear-gradient(0deg, #667eea, #764ba2);    /* ↑ to top */
background: linear-gradient(90deg, #667eea, #764ba2);   /* → to right */
background: linear-gradient(180deg, #667eea, #764ba2);  /* ↓ to bottom */
background: linear-gradient(270deg, #667eea, #764ba2);  /* ← to left */
background: linear-gradient(45deg, #667eea, #764ba2);   /* ↗ diagonal */

Step 3: Adding More Colors

/* Three colors */
background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb);
/* Five colors — a sunset */
background: linear-gradient(180deg, #0c0c3e, #5a189a, #c44569, #f8b500, #ffeaa7);

Step 4: Color Stops and Positions

Color stops define where each color starts and ends:

background: linear-gradient(
  90deg,
  #ff6b6b 0%,
  #ff6b6b 20%,
  #feca57 20%,
  #feca57 40%,
  #48dbfb 40%,
  #48dbfb 60%
);
/* Creates a striped effect with hard transitions */

For smooth transitions with custom positioning:

background: linear-gradient(
  90deg,
  #667eea 0%,
  #764ba2 50%,
  #f093fb 100%
);

Step 5: Radial Gradients

Radial gradients emanate from a center point:

/* Basic radial */
background: radial-gradient(circle, #ff6b6b, #c44569);
/* Positioned center */
background: radial-gradient(circle at top left, #ff6b6b, #c44569);
/* Elliptical */
background: radial-gradient(ellipse, #667eea, #764ba2);
/* Custom size */
background: radial-gradient(circle 200px at 50% 50%, #667eea, #764ba2);

Step 6: Conic Gradients

Conic gradients sweep around a center point:

/* Basic conic */
background: conic-gradient(#ff6b6b, #feca57, #48dbfb, #ff6b6b);
/* From a specific angle */
background: conic-gradient(from 45deg, #ff6b6b, #feca57, #48dbfb, #ff6b6b);
/* Positioned center */
background: conic-gradient(from 0deg at 50% 50%, #667eea, #764ba2, #667eea);

Step 7: Advanced Techniques

Repeating Gradients

/* Repeating linear */
background: repeating-linear-gradient(
  45deg,
  #667eea,
  #667eea 10px,
  #764ba2 10px,
  #764ba2 20px
);
/* Repeating radial */
background: repeating-radial-gradient(
  circle,
  #ff6b6b 0px,
  #ff6b6b 10px,
  #feca57 10px,
  #feca57 20px
);

Layered Gradients

You can stack multiple gradients using comma separation:

background:
  linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8)),
  radial-gradient(circle at 30% 30%, rgba(255, 107, 107, 0.5), transparent 50%);

Gradient Overlays on Images

.hero {
  background:
    linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8)),
    url('hero.jpg');
  background-size: cover;
  background-position: center;
}

Animated Gradients

.animated-gradient {
  background: linear-gradient(270deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 400% 400%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Step 8: Practical Examples

Glassmorphism Card

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

Mesh Gradient Background

.mesh-bg {
  background:
    radial-gradient(at 20% 20%, #667eea 0px, transparent 50%),
    radial-gradient(at 80% 0%, #f093fb 0px, transparent 50%),
    radial-gradient(at 80% 80%, #4facfe 0px, transparent 50%),
    radial-gradient(at 0% 80%, #43e97b 0px, transparent 50%),
    #1a1a2e;
}

Step 9: Tips for Great Gradients

• Limit color count: 2-4 colors usually look best
• Use harmonious colors: Try analogous or complementary schemes
• Mind contrast: Ensure text remains readable
• Test on different screens: Gradients can look different on various displays
• **Use the CSS Gradient Generator for rapid iteration

Conclusion

CSS gradients offer incredible creative potential, from subtle backgrounds to bold visual statements. With linear, radial, and conic gradients at your disposal — plus techniques like layering, animation, and mesh effects — you can create virtually any visual you can imagine. Start experimenting with our CSS Gradient Generator and bring your designs to life.