Generate Gradients Online

How to Generate a CSS Gradient Online

1. Pick a Gradient Type: Choose Linear (a straight axis from one edge to another — the default for headers, buttons, hero backgrounds), Radial (an ellipse or circle expanding from a centre point — good for spotlight and vignette effects), or Conic (colors swept around a centre like a pie chart — used for color wheels, progress rings, and donut charts).
2. Set the Angle, Center, or Sweep: For linear gradients enter an angle in degrees (0deg points to the top, 90deg to the right, 180deg to the bottom — 180deg is the CSS default when no direction is given) or use a keyword like to right or to bottom right. For radial gradients pick the shape (default ellipse, switch to circle for a perfectly round falloff), size (farthest-corner is the default), and centre position (at center by default; at 30% 70% for off-axis). For conic gradients set the starting angle (from 0deg) and centre.
3. Add Color Stops: Click to add stops, drag to reposition. Each stop is color position% (e.g., #ff6b6b 0%, #4ecdc4 100%). Place two stops at the same position to create a hard stop (instant color change with no blend — the basis for CSS stripes and pie-chart wedges). Optionally select an interpolation color space (default srgb for legacy hex/rgb colors, or in oklch for perceptually smooth midpoints that avoid grey "dead zones").
4. Preview, Copy, and Export: The live preview updates as you change stops, angle, and color space. Copy the background: linear-gradient(...) declaration straight into your stylesheet, layer multiple gradients with comma-separated backgrounds, or export as an SVG for design tools. Everything runs in your browser session — no sign-up, no watermark.

Why Generate Gradients in CSS?

CSS gradients are vector backgrounds the browser paints at runtime — they scale to any viewport, weigh zero bytes (no image request), and animate smoothly with transition and @property. A hand-tuned linear-gradient with three stops replaces a 50 KB PNG and stays crisp on a 4K display. Common uses:

• Hero sections and CTA buttons — Stripe, Linear, and Vercel popularised the "subtle two-stop linear gradient" hero look that ships in pure CSS and reflows on resize without bitmap fallbacks.
• Glassmorphism and material backdrops — A radial-gradient at low opacity layered behind backdrop-filter: blur() gives the frosted-glass look used across iOS 17+, macOS Sonoma, and modern web dashboards.
• Data visualisation — conic-gradient produces pie charts, donut rings, progress indicators, and color wheels directly in CSS without an SVG library or canvas.
• Skeleton loaders and shimmer placeholders — A linear-gradient with three stops animated via background-position is the standard skeleton-screen pattern shipped by Facebook, LinkedIn, and YouTube.
• Stripes, checkerboards, and patterns — Hard stops in repeating-linear-gradient or repeating-conic-gradient produce CSS-only stripes, gingham, and chessboard patterns at any resolution.
• Dark-mode and theme tinting — A full-page linear-gradient at 4-8% opacity tints content for dark themes without re-coloring every element.

Pair this with the color converter to translate between hex, HSL, and OKLCH, then minify your CSS before deploying the gradient declaration.

Linear vs Radial vs Conic — Pick the Right Type

Property	linear-gradient	radial-gradient	conic-gradient
Color flow	Straight line along an axis	Outward from a centre point	Swept around a centre point
Direction control	Angle in deg, turn, rad, or to <side> keyword	Shape (circle / ellipse), size keyword, at <position>	Starting angle (from <angle>), at <position>
Default	180deg (top to bottom)	ellipse farthest-corner at center	from 0deg at center
Typical use	Headers, buttons, backdrops, skeletons	Spotlights, vignettes, glow effects	Pie charts, progress rings, color wheels
Browser support	All browsers since 2011 (IE10+)	All browsers since 2011 (IE10+)	Chrome 69+, Safari 12.1+, Firefox 83+ (~95% global)
Hard stops	Sharp stripes when two stops share a position	Concentric rings	Pie-chart wedges

conic-gradient is the newest of the three and was the slowest to land in Firefox (November 2020). For sites that still target older Samsung Internet or in-app webviews, fall back to an SVG or PNG when conic is critical.

Color Interpolation — Why Your Midpoint Looks Grey

Interpolation	Syntax	Midpoint behaviour	When to use
sRGB (default for legacy colors)	linear-gradient(blue, yellow)	Passes through dull grey (~127,127,127) — the "dead zone" complaint	Same-hue ramps, dark-to-light fades of one color
in oklch	linear-gradient(in oklch, blue, yellow)	Stays saturated and visually smooth across hues	Anything spanning multiple hues; brand gradients
in oklab	linear-gradient(in oklab, blue, yellow)	Perceptually uniform Cartesian; close to oklch but without explicit hue path	Smooth tonal blends without hue rotation
in hsl / in hsl longer hue	linear-gradient(in hsl longer hue, red, lime)	Rotates the hue wheel — short or long path	Rainbow effects, hue-cycling animations
in srgb-linear	linear-gradient(in srgb-linear, ...)	Light-linear mixing; brighter midpoints than plain srgb	Lighting and bloom effects

CSS Color 4 changed the default: as of the spec, gradients between modern color notations (oklch(), lab(), color()) interpolate in Oklab by default, but gradients between legacy notations (hex, named, rgb(), hsl()) keep interpolating in sRGB for backward compatibility. If you write hex colors and want the smoother result, you must opt in with in oklch or in oklab. Browser support for <color-interpolation-method>: Chrome 111+, Firefox 113+, Safari 16.4+ (May 2023).

Frequently Asked Questions

Linear, radial, or conic — which should I pick?

Use linear for anything resembling a sky, sunset, or backdrop where color flows in one direction (headers, buttons, hero sections). Use radial when one point should feel "brighter" than the rest — spotlights, vignettes, glow effects behind icons. Use conic when colors should rotate around a centre — pie charts, donut progress rings, color wheels, and angular conic-stripe patterns. Linear is by far the most common: roughly 80% of production gradients on the web are linear two-stop fades.

What does 0deg mean in a linear gradient?

In CSS, 0deg points to the top (the gradient line ends at the top edge), 90deg points to the right, 180deg to the bottom, and 270deg to the left. This differs from SVG and many graphics tools where 0deg points right. If you skip the angle entirely, CSS defaults to to bottom (which is 180deg). The keywords to top, to right, to bottom, to left, and corner forms like to bottom right are interchangeable with their angle equivalents.

Why does my blue-to-yellow gradient look muddy in the middle?

Because the browser interpolates in sRGB by default for hex/named colors, and the linear midpoint between #0000ff and #ffff00 is (127,127,127) — neutral grey. The fix is to add in oklch (or in oklab): linear-gradient(in oklch, blue, yellow) keeps the saturation up and produces a smooth blue → teal → green → yellow-green → yellow transition with no grey patch. Designer-focused tools like Stripe's gradient picker and Figma's "perceptually uniform" toggle do exactly this under the hood.

Can I layer multiple gradients in one background?

Yes — background-image accepts a comma-separated list, painted top to bottom in source order: background-image: linear-gradient(...), radial-gradient(...), url('texture.png');. Use this for mesh-gradient effects (several semi-transparent radial gradients layered on a base color), aurora backgrounds, or to put a tint over a photo. Be aware that background: linear-gradient(...), linear-gradient(...); will only paint both if the top layers have transparency somewhere, otherwise the upper gradient hides the rest.

How do I make a hard stop (two solid color blocks with no blend)?

Place two color stops at the same position: linear-gradient(to right, #3498db 50%, #e74c3c 50%) produces a sharp 50/50 split with no gradient blend. Stack more stops to make stripes: linear-gradient(to right, #3498db 0 33%, #e74c3c 33% 66%, #f1c40f 66% 100%) paints three equal vertical bands. For repeating stripes (gingham, ribbons, candy canes) use repeating-linear-gradient and stop the pattern after a fixed pixel value.

Circle or ellipse — what's the radial default?

If you write radial-gradient(red, blue) with no shape specified, the browser defaults to ellipse sized to farthest-corner at center. The ellipse stretches to match the element's aspect ratio, so a 200×50 box produces an elongated horizontal ellipse and a 200×200 box produces a near-circle by coincidence. Specify circle explicitly when you want a perfectly round falloff regardless of the box dimensions.

Will conic-gradient work for all my users?

For the vast majority, yes — conic-gradient has been in Chrome and Edge since version 69 (September 2018), Safari 12.1 (March 2019), and Firefox 83 (November 2020), covering roughly 95% of global users. Holdouts are old in-app webviews, KaiOS browsers, and very dated Samsung Internet versions. If conic is decorative, ship a linear-gradient fallback in an earlier background-image declaration; if it's a data-vis pie chart, fall back to an inline SVG.

Can I animate a CSS gradient?

Not directly with plain transition — gradients aren't interpolated by default. The standard workarounds are: (1) animate background-position while keeping a much-larger gradient (the shimmer-loader trick), (2) animate --variables registered with @property and reference them inside the gradient (Chrome 85+, Firefox 128+, Safari 16.4+), or (3) crossfade two stacked gradient layers via opacity. Native gradient interpolation is on the CSS roadmap but not yet shipped in all browsers as of 2026.