CSS Gradient Generator: Linear, Radial & Conic Explained

A CSS gradient is one line of code standing in for what used to require a designed, exported, and uploaded image file: background: linear-gradient(135deg, #3B82F6, #EC4899);. No HTTP request, no fixed resolution, no file size — just a formula the browser paints natively, scaling perfectly to any container.

This guide covers all three gradient types — linear, radial, and conic — plus gradient text, mesh gradients, and the accessibility catch most tutorials skip. Build yours live below and copy the exact CSS.

🧪 Try It: Live CSS Gradient Generator

✦ What Is a CSS Gradient?

Because gradients are pure CSS, they're typically 50-200 bytes of code compared to 5-50KB or more for an equivalent exported PNG — smaller, sharper at any size, and instantly editable without touching design software.

📏 Linear Gradient Syntax

/* By angle */
background: linear-gradient(135deg, #3B82F6, #EC4899);

/* By keyword */
background: linear-gradient(to right, #3B82F6, #EC4899);

/* Multiple color stops with positions */
background: linear-gradient(90deg, red 0%, yellow 50%, green 100%);

The gradient line runs from the element's center outward in the given direction — colors are distributed along that line based on their position, defaulting to evenly spaced if no percentages are given.

⭕ Radial Gradient Syntax

/* Default: ellipse from center */
background: radial-gradient(#3B82F6, #EC4899);

/* Circle, offset position */
background: radial-gradient(circle at 30% 70%, #3B82F6, #EC4899);

Radial gradients are the foundation for glow effects, spotlight overlays, and adding a sense of depth to otherwise flat interfaces.

🎡 Conic Gradient Syntax

/* Basic conic sweep */
background: conic-gradient(#3B82F6, #EC4899, #3B82F6);

/* Custom start angle and position */
background: conic-gradient(from 90deg at 50% 50%, red, yellow, green, blue, red);

Conic gradients are exactly what powers most CSS-only color wheel widgets and pie-chart-style visualizations — including the harmony wheels used elsewhere on this site.

✍️ Gradient Text

.gradient-heading {
  background-image: linear-gradient(90deg, #7b2ff7, #f0529c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

This exact technique is what powers most of the gradient logo and heading text you see across modern SaaS and design-agency websites.

🌫️ Mesh Gradients

background:
  radial-gradient(at 20% 20%, #a855f7 0%, transparent 50%),
  radial-gradient(at 80% 30%, #ec4899 0%, transparent 50%),
  radial-gradient(at 40% 80%, #f0529c 0%, transparent 50%),
  #f5d4b8;

This is the exact technique behind the ambient, smoky gradient look showing up across 2026 hero sections — see our 2026 web design color trends for more on where this style fits.

🔁 Repeating Gradients

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg, #3B82F6, #3B82F6 10px, #EC4899 10px, #EC4899 20px
);

♿ Text Contrast on Gradients

A gradient that looks perfectly readable in its darkest corner can silently fail contrast where it fades lighter. Check the worst-case point specifically — see our WCAG 2.2 contrast guide for exact AA/AAA thresholds.

🌍 Browser Support & Performance

Beyond file size, gradients are responsive by default — they automatically adapt to container size changes without regenerating or re-exporting anything, which a static gradient image simply can't do.

🚫 Common CSS Gradient Mistakes

1. Forgetting the -webkit- prefix for gradient text. background-clip: text still needs -webkit-background-clip: text for full browser support.
2. Testing contrast at the wrong point. Always check the gradient's lightest, lowest-contrast region — not the average.
3. Overcomplicating simple backgrounds. A subtle two-color gradient often reads better than a busy multi-stop blend.
4. Confusing conic-gradient's angle-based stops with radial's length-based stops. The two use fundamentally different positioning systems.
5. Forgetting a solid-color fallback. Older or unusual renderers may not support every gradient type — a sensible background-color fallback costs nothing.

🏁 Conclusion

CSS gradients replace what used to be an image-export workflow with a single, editable line of code: pick linear for a straight blend, radial for a circular glow, or conic for a color-wheel sweep, then layer several radial gradients together for the mesh look defining 2026 design. Build yours in the live tool above, copy the exact CSS, and always check contrast at the gradient's weakest point before shipping text over it.

❓ Frequently Asked Questions