CSS Gradients: 30 Beautiful Examples You Can Copy

CSS gradients are one of the most powerful visual tools available to web developers. They eliminate the need for gradient images, reduce HTTP requests, scale perfectly at any resolution, and can be animated. Whether you need a subtle background, a striking hero section, or a gradient text effect, CSS has you covered.

This guide provides 30 production-ready gradient examples organized by type, along with the theory behind each gradient function. Every example includes the CSS code and a live preview you can see right here on the page.

1. Linear Gradients

Linear gradients create a color transition along a straight line. You can control the direction using angles (e.g., 45deg) or keywords (e.g., to right). They are the most commonly used gradient type and are perfect for backgrounds, buttons, and overlays.

2. Radial Gradients

Radial gradients radiate outward from a center point. They create circular or elliptical color transitions that are perfect for spotlight effects, glowing orbs, and organic backgrounds. The shape can be circle or ellipse (default), and you can control the position with keywords like at center or percentage values.

3. Conic Gradients

Conic gradients sweep color transitions around a center point, like the hands of a clock. They are ideal for pie charts, color wheels, and decorative backgrounds. The conic-gradient() function uses angular values instead of linear positions.

4. Advanced Techniques

These examples combine multiple gradient layers, use repeating gradients, or apply gradients to text and borders for more creative effects.

Gradient Text

Apply a gradient as a text color using background-clip: text. This technique works in all modern browsers.

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

Gradient Border

Create gradient borders using a background layer technique since CSS border does not support gradients directly.

.gradient-border {
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #667eea, #764ba2) border-box;
  border: 2px solid transparent;
  border-radius: 12px;
}

Layered Gradients

Repeating Gradients

Mesh-like Effect

5. CSS Gradient Syntax Explained

All three gradient types follow a consistent syntax pattern. Understanding this pattern means you can create any gradient from scratch without looking up the docs.

linear-gradient( direction, color-stop1, color-stop2, ... )

direction: angle (45deg, 135deg) or keyword (to right, to bottom left)
color-stop: color + optional position (red 20%, blue 80%)

radial-gradient( shape size at position, color-stop1, color-stop2, ... )

shape: circle | ellipse (default: ellipse)
size: closest-side | farthest-corner | explicit size
position: center | top left | 30% 40% (default: center)

conic-gradient( from angle at position, color-stop1, color-stop2, ... )

angle: rotation start (from 45deg) (default: 0deg)
position: center point (default: center)
color-stop: color + angular position (red 0deg, blue 180deg)

6. Color Stops and Transitions

Color stops are the positions where colors are defined in a gradient. Between stops, the browser automatically interpolates a smooth transition. You have full control over where these stops are placed.

• No position specified: Colors are evenly distributed. linear-gradient(red, green, blue) places them at 0%, 50%, and 100%.
• With positions: linear-gradient(red 20%, blue 80%) starts red at 20% and ends blue at 80%. Below 20% is solid red; above 80% is solid blue.
• Hard stops: Place two stops at the same position for a sharp line. linear-gradient(red 50%, blue 50%) creates a hard split.
• Transparency: Use rgba() or the transparent keyword to create fade-in/fade-out effects.

7. Performance Considerations

CSS gradients are generally very performant because they are rendered by the GPU. However, there are a few things to keep in mind for complex gradient usage.

• Animation: Animating the background property (including gradients) is expensive. Instead, use a pseudo-element with the gradient and animate opacity or transform.
• Many color stops: Gradients with dozens of stops are more expensive to render. Keep it under 10 stops for best performance.
• Layered gradients: Each layer adds rendering cost. Two to three layers are fine; ten layers may cause jank on low-end devices.
• Large areas: Gradients on full-viewport elements are fine. The GPU handles them efficiently regardless of element size.

8. Browser Support

As of 2026, CSS gradient support is excellent across all modern browsers.

• linear-gradient() -- Supported in all browsers. No prefix needed since 2013.
• radial-gradient() -- Supported in all browsers. No prefix needed.
• conic-gradient() -- Supported in Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+. Essentially universal in 2026.
• repeating-*-gradient() -- Same support as the corresponding non-repeating version.

9. Pro Tips

• Use HSL for smoother transitions. Gradients between HSL colors often look more natural than RGB gradients because HSL separates hue from lightness.
• Add a slight midpoint shift. Instead of equal distribution, shift the midpoint slightly (e.g., 60% instead of 50%) for more natural-looking gradients.
• Use oklch() for perceptually uniform gradients. The oklch() color space (supported in modern browsers) produces gradients without the "muddy middle" that plagues RGB gradients between complementary colors.
• Layer radial gradients for mesh effects. Multiple semi-transparent radial gradients at different positions simulate Apple-style mesh gradients.
• Use CSS custom properties. Define gradient colors as variables to create easily themeable gradients: linear-gradient(var(--start), var(--end)).