Abstract colorful gradient background.
Photo: Anni Roenkae / Pexels
← THE PAPERWORK/ARTICLE

CSS Gradient Examples: Linear, Radial, and Conic with Code

Real CSS gradient examples with copy-paste code for linear, radial, conic, and text gradients. Includes a free visual gradient generator tool.

BY ALI HASSAN·

CSS Gradient Examples: Linear, Radial, and Conic with Code

CSS gradients replace what used to require image files. Every modern browser supports them, they scale perfectly, and they cost zero HTTP requests. Below are real examples with code you can copy directly — or use Mizakii's CSS Gradient Generator to build your own visually and export the CSS in one click.

The Three Types of CSS Gradient

| Type | Function | Best for | |------|----------|----------| | Linear | linear-gradient() | Backgrounds, buttons, banners | | Radial | radial-gradient() | Spotlight effects, glows, circles | | Conic | conic-gradient() | Pie charts, color wheels, progress rings |

Linear Gradient Examples

Linear gradients go from one point to another in a straight line.

Basic Syntax

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

The direction can be an angle (45deg, 180deg) or a keyword (to right, to bottom left).

Sunset

background: linear-gradient(135deg, #f97316, #ec4899);

Orange to pink, diagonal. Classic warm gradient for hero sections.

Ocean

background: linear-gradient(180deg, #0ea5e9, #0f172a);

Light blue to near-black. Works well for dark-mode UI and SaaS dashboards.

Purple to Pink

background: linear-gradient(90deg, #8b5cf6, #ec4899);

Horizontal left-to-right. Popular for buttons and badges.

Forest

background: linear-gradient(135deg, #064e3b, #10b981);

Deep green to emerald. Clean for fintech and productivity apps.

Charcoal

background: linear-gradient(180deg, #1f2937, #374151);

Subtle dark gradient for sidebar backgrounds and code editor themes.

Golden Hour

background: linear-gradient(135deg, #f59e0b, #ef4444);

Amber to red. Warm and energetic — good for CTAs and notifications.

Multi-stop gradient

background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);

Three colour stops. Gives you a smooth purple→pink sweep.

Radial Gradient Examples

Radial gradients radiate from a centre point outward.

Basic Syntax

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

Soft glow

background: radial-gradient(circle at center, #8b5cf6 0%, #1e1b4b 100%);

Purple glow on a deep indigo background. Common in landing page hero sections.

Spotlight

background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15), transparent 60%);

Overlay this over a solid background to add a subtle highlight without changing the base colour.

Vignette effect

background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.6) 100%);

Darkens the edges of an image or container. Classic photography effect.

Conic Gradient Examples

Conic gradients rotate around a centre point. Browser support is modern (Chrome 69+, Firefox 83+, Safari 12.1+).

Basic Syntax

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

Simple colour wheel

background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);

Pie chart (60% / 40%)

background: conic-gradient(#6366f1 60%, #e5e7eb 60%);
border-radius: 50%;
width: 120px;
height: 120px;

No SVG or JS needed. Change the 60% value to match your data.

Progress ring

background: conic-gradient(#10b981 var(--progress), #1f2937 var(--progress));
border-radius: 50%;

Set --progress via JavaScript to animate a circular progress indicator.

CSS Text Gradient

Text gradients require a small trick — background-clip: text with a transparent text colour:

.gradient-text {
  background: linear-gradient(90deg, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

This works in all modern browsers. The -webkit- prefix is still needed for Safari compatibility.

Browser Support

| Property | Chrome | Firefox | Safari | Edge | |----------|--------|---------|--------|------| | linear-gradient | ✅ | ✅ | ✅ | ✅ | | radial-gradient | ✅ | ✅ | ✅ | ✅ | | conic-gradient | ✅ 69+ | ✅ 83+ | ✅ 12.1+ | ✅ | | background-clip: text | ✅ | ✅ | ✅ | ✅ |

Tips for Using CSS Gradients Well

Use background not background-color — gradients go on the background shorthand property, not background-color.

Fallback colour — add a solid colour before the gradient for browsers that might not support the specific syntax:

background: #6366f1;
background: linear-gradient(135deg, #6366f1, #ec4899);

Avoid banding — if you see visible colour bands, add more colour stops or try background-size tricks. Banding is most visible on low-contrast gradients on some monitors.

Use a generator for complex gradients — manually tweaking angle and colour stops is tedious. Mizakii's Gradient Generator lets you pick colours, adjust the angle, preview live, and copy the CSS with one click.

Animating CSS Gradients

CSS doesn't natively transition between gradients (you can't animate background directly), but there are two clean workarounds:

Using background-position (pseudo-animation)

.animated-gradient {
  background: linear-gradient(270deg, #6366f1, #ec4899, #f97316);
  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%; }
}

Oversizes the gradient and shifts the position — gives a smooth flowing effect.

Using opacity transition on a pseudo-element

.card {
  position: relative;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #ec4899, #f97316);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.card:hover::after {
  opacity: 1;
}

Fades between two gradients on hover. Smooth, performant, works everywhere.

Using CSS Variables with Gradients

CSS custom properties make gradients maintainable across a design system:

:root {
  --brand-start: #6366f1;
  --brand-end: #ec4899;
  --brand-angle: 135deg;
}

.button {
  background: linear-gradient(
    var(--brand-angle),
    var(--brand-start),
    var(--brand-end)
  );
}

.banner {
  background: linear-gradient(
    180deg,
    var(--brand-start),
    var(--brand-end)
  );
}

Change --brand-start once and every gradient on the page updates. Useful for theming and dark mode.

Common CSS Gradient Mistakes

Using background-color instead of background — gradients must go on background, not background-color. background-color only accepts solid colours.

Forgetting a solid colour fallback — add background: #6366f1; before the gradient line so older or niche browsers show a reasonable fallback instead of no background.

Oversaturated gradients — very vibrant, full-saturation gradients can be hard to read text on top of. Either lower the opacity of the overlay text background or use a semi-transparent dark overlay instead of pure text on gradient.

Too many colour stops — gradients with 6–8 stops often look muddy. Three stops is usually the sweet spot.

Build Your Gradient Visually

Every example above can be customised and previewed live in Mizakii's CSS Gradient Generator. Adjust colours, angle, and gradient type — then copy the CSS directly into your project. Free, no signup.