Linear Gradients

A linear gradient transitions colors along a straight line. You can control the direction using keywords or specific angles.

Syntax

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

• Directions: You can use keywords like to right, to bottom left, or to top. The default is to bottom.

• Angles: For more precision, use degrees (e.g., 45deg, 180deg, -90deg).

Example: The Sunset Fade

CSS

.box {
  background: linear-gradient(45deg, #ff9a9e, #fad0c4);
}

Radial Gradients

A radial gradient starts at a single point (the center by default) and radiates outward in a circular or elliptical shape.

Syntax

CSS

background: radial-gradient(shape size at position, start-color, ..., last-color);

• Shape: circle or ellipse (default).

• Position: You can specify where the center starts (e.g., at top right or at 20% 50%).

Example: The Glow Effect

CSS

.circle {
  background: radial-gradient(circle, #ffffff, #3b82f6);
}

Conic Gradients

Conic gradients rotate colors around a center point (like a pie chart or a color wheel). These are excellent for creating UI elements like loading spinners or gauges.

Example: Pie Chart Style

CSS

.pie {
  background: conic-gradient(red 0deg 90deg, blue 90deg 180deg, green 180deg);
}

Advanced Techniques

Color Stops

You don't have to let the browser decide where colors blend. You can specify "stops" using percentages or pixels to create sharp lines or specific spacing.

• Hard Edges: If two colors share the same stop percentage, the transition is instant.

  • linear-gradient(to right, red 50%, blue 50%) creates a split-screen effect.

Repeating Gradients

If you want to create patterns like stripes or ripples, use the repeating variants:

• repeating-linear-gradient

• repeating-radial-gradient

• repeating-conic-gradient

Example: Striped Pattern

CSS

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

Tips for Best Results

1. Accessibility: Always ensure your text has enough contrast against the gradient background.

2. Fallback Colors: Always provide a solid background-color before the gradient for older browsers that might not support it.

3. Layering: You can stack multiple gradients by separating them with commas. The first one listed will be on top.

Since we’ve covered the basics, let's dive into some practical, high-end designs you can achieve with gradients. Modern web design rarely uses a simple "top-to-bottom" fade; instead, it uses layering and transparency to create depth.

The "Glassmorphism" Glow

This effect uses a radial gradient to create a "spotlight" behind a semi-transparent element. It gives the UI a sense of depth and lighting.

.glass-container {
  /* A subtle radial glow coming from the top-left */
  background: radial-gradient(
    circle at top left, 
    rgba(255, 255, 255, 0.2), 
    transparent 40%
  ),
  linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Hard-Stop Striped Patterns

By setting color stops at the exact same percentage, you remove the "gradient" blur and create sharp, geometric patterns. This is great for progress bars or decorative backgrounds.

.caution-bar {
  height: 20px;
  background: repeating-linear-gradient(
    45deg,
    #f3da0b,
    #f3da0b 10px,
    #000 10px,
    #000 20px
  );
}

Mesh Gradients (Layering)

Mesh gradients look like organic, flowing clouds of color. You achieve this by layering multiple radial-gradients on top of each other and moving their positions.

.mesh-background {
  background-color: #ff99ee;
  background-image: 
    radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
}

Conic Gradient Progress Ring

Conic gradients are perfect for circular data visualization. By using a "mask" or a smaller circle on top, you can create a ring chart.

.progress-ring {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  /* 70% blue, 30% grey */
  background: conic-gradient(#3b82f6 0% 70%, #e5e7eb 70% 100%);
}

Text Gradients

You can actually apply a gradient to text itself. This is a popular "SaaS product" look for headings.

.gradient-text {
  background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
  -webkit-background-clip: text; /* Clips the background to the text shape */
  -webkit-text-fill-color: transparent; /* Makes the original text color invisible */
  font-weight: bold;
}

Comparison of Gradient Types