How many color stops can I use in a CSS gradient?

Technically CSS supports any number, but visually 2 to 6 stops give the best results. Too many stops produce muddy or banded gradients. This tool caps at 6.

CSS Gradient Generator

Q: What's the difference between linear, radial, and conic gradients?

A linear gradient blends colors along a straight line. A radial gradient blends from a center point outward in a circle or ellipse. A conic gradient sweeps colors around a center point like clock hands, perfect for pie charts and color wheels.

Q: How do I make a transparent or fade-out gradient?

Lower the opacity on one of the stops. A stop fading to 0 percent opacity creates a smooth fade to transparent, ideal for image overlays. The tool outputs 8-digit hex automatically.

Q: What is a color stop position?

A position from 0 to 100 percent tells the browser where along the gradient that color is at full strength. Two stops at 0 and 100 percent blend across the whole element.

Q: Do CSS gradients work in all browsers?

Linear and radial gradients work in all modern browsers. Conic gradients work in current Chrome, Firefox, Safari, and Edge but may lack support in very old browsers.

Build linear, radial & conic gradients visually — up to 6 color stops with per-stop opacity, hex input, angle controls, 12 presets, random generator, and ready-to-paste CSS. 100% browser-based.

Angle °

Color Stops 2 / 6

CSS Code

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

Preset gradients

Status

2 stops · linear 135°

Edit colors, adjust opacity, position, or pick a preset — preview and CSS update live.

Quick Reference

Linear — gradient along a straight line (angle 0–360°)
Radial — gradient from a center point outward (circle or ellipse)
Conic — gradient swept around a center point (great for pie charts, color wheels)
0° = top · 90° = right · 180° = bottom · 270° = left

How to Use the CSS Gradient Generator

Pick a gradient type — linear, radial, or conic.
Set the angle (linear/conic) or shape and position (radial).
Edit color stops — change the color or hex, adjust opacity, drag the position slider, or remove stops.
Click + Add Stop for more colors (up to 6), or use Random / Reverse.
Hit Copy to grab the CSS, or click any preset to load a curated gradient.

What Is a CSS Gradient?

A CSS gradient is a smooth blend between two or more colors generated entirely by the browser — no image files needed. Gradients render at any resolution without pixelation, load instantly, and can be animated with CSS transitions. They're declared as the background property of any element, making them ideal for buttons, hero sections, cards, overlays, and decorative backgrounds. Modern CSS supports three gradient types: linear (line-based), radial (circular/elliptical), and conic (swept around a center) — and each color stop can carry its own opacity for fade-to-transparent effects.

Common Uses for CSS Gradients

🎯 Hero sectionsEye-catching backgrounds that don't slow page load.

🔘 ButtonsDepth and hover states without bitmap images.

🃏 Cards & panelsSubtle highlights and visual hierarchy.

✨ Loading skeletonsAnimated shimmer effects for placeholders.

🌫️ Image overlaysFade text into images using gradients with opacity.

🥧 Charts & wheelsPure-CSS pie charts and color wheels with conic gradients.

Why Choose Our Gradient Generator?

✅ Privacy-first — 100% browser-based, nothing leaves your device
✅ All three gradient types — linear, radial, and conic
✅ Up to 6 color stops — with per-stop opacity (alpha)
✅ Hex input — paste exact brand colors, not just the picker
✅ Random & Reverse — explore ideas or flip direction instantly
✅ Live preview — see exactly what your CSS will render
✅ 12 curated presets — start from a beautiful base
✅ Copy-ready code — paste directly into your stylesheet
✅ Dark mode & fullscreen, no signup, no tracking

Frequently Asked Questions

What's the difference between linear, radial, and conic gradients?

A linear gradient blends colors along a straight line (think sunset). A radial gradient blends from a center point outward in a circle or ellipse (think spotlight). A conic gradient sweeps colors around a center point like clock hands, perfect for pie charts and color wheels.

How do I make a transparent / fade-out gradient?

Lower the opacity on one of the stops. A stop at full color fading to the same color at 0% opacity creates a smooth fade-to-transparent, ideal for image overlays. The tool outputs 8-digit hex (#rrggbbaa) automatically.

How many color stops can I use?

Technically CSS supports any number, but visually 2–6 stops give the best results. Too many produce muddy or banded gradients, so this tool caps at 6 to keep output clean.

What is a "color stop position"?

A position (0–100%) tells the browser where along the gradient that color is at full strength. Two stops at 0% and 100% blend across the whole element; a stop at 50% creates a controllable midpoint.

Do CSS gradients work in all browsers?

Linear and radial gradients work in all modern browsers. Conic gradients work in current Chrome, Firefox, Safari, and Edge but may lack support in very old browsers — use linear or radial as a fallback for maximum compatibility.

Does the gradient generator work offline?

Yes. Once the page is loaded, everything runs in your browser — no internet connection needed.