CSS Gradient Generator — blend it like ink

Drag color stops, dial the angle, watch the proof render live — then copy standard CSS, prefixed compatibility, or React styles straight into your project.

Proof №1

click the ruler to add a stop · drag handles to move

Color Stops

Built for the copy-paste moment

You already know the gradient you want in your head — this tool exists to get the CSS string out of it without a dozen tabs open. Designers building hero sections, developers prototyping buttons, and anyone tired of hand-writing angle values or guessing conic syntax can drag stops, pick a family, and copy the output. The X and Y inputs pin the focal point exactly where the mockup needs it, so what you ship matches what you previewed.

From empty panel to shipped gradient

Click [btn] Linear, [btn] Radial, or [btn] Conic to lock in the gradient family.
Set the angle with [btn] 0 through [btn] 315, or switch [btn] Circle and [btn] Ellipse for radial shapes.
Drag the focal point using the X and Y fields until the highlight sits where you want it.
Press [btn] + Add stop for each extra color, then hit [btn] Reverse to flip the stop order instantly.
Tap [btn] Random when you need a starting palette, then fine-tune the stops before copying the CSS.

Three Gradient Families, Decoded

Every CSS gradient belongs to one of three families. Each has its own syntax, its own mental model, and its own best-fit jobs.

Linear

linear-gradient(135deg, …)

Colors blend along a straight line. The angle in degrees points where the gradient goes: 0° is up, 90° is right, 135° is bottom-right. The workhorse for hero backgrounds, buttons, and cards.

Radial

radial-gradient(circle at 30% 30%, …)

Colors radiate from a center point in circles or ellipses. The at x% y% clause places the center — drag the crosshair in the studio to feel it. Ideal for spotlights, orbs, and soft vignettes.

Conic

conic-gradient(from 90deg at 50% 50%, …)

Colors sweep around a center like a radar or pie chart. The from angle sets where the sweep starts. Perfect for gauges, progress rings, and checkerboard or starburst patterns.

Gradient Syntax Cheat Sheet

The anatomy of a gradient function, token by token.

Token	Example	What it does
`angle`	`135deg`	Direction of a linear gradient, or the start of a conic sweep. 0° points up; degrees increase clockwise.
`at position`	`at 30% 40%`	Places the center of a radial or conic gradient inside the element.
`shape`	`circle` / `ellipse`	Radial only: whether the blend radiates as a perfect circle or stretches to the element shape.
`color stop`	`#FF6B6B 0%`	A color and its position along the gradient line. Positions are optional and default to even spacing.
`hard stop`	`#000 50%, #fff 50%`	Two stops at the same position create an instant color switch instead of a blend.
`prefix`	`-webkit-linear-gradient(…)`	Old-engine syntax for Android 4.3-, iOS 6-, and old Firefox. List it before the standard syntax.
`fallback`	`background: #FF6B6B;`	A solid color declared first; browsers without gradient support keep it, the rest override it.

Prefixes & Fallbacks, Sorted

One paste-and-forget block that covers browsers from 2011 to tomorrow.

The order matters

solid → -webkit- → -moz- → standard

CSS cascade rules mean the last parseable declaration wins. Declare the solid fallback first, then the prefixed engines, then the standard syntax last. Every CssShift CSS block is already stacked in this order.

When prefixes die

conic: no prefix needed

Conic gradients shipped in Chrome 69, Firefox 83, and Safari 12.1 without a prefixed era, so no -webkit-conic-gradient exists. CssShift omits prefix lines for conic automatically and keeps them for linear and radial.

The React twist

backgroundImage: 'linear-gradient(…)'

Inline style objects use camelCase, so CSS background becomes backgroundImage, and the value must be a string. The React tab emits the object with a plain background fallback line included.

Frequently Asked Questions

What is the difference between linear, radial, and conic gradients?

A linear gradient blends colors along a straight line at an angle (0–360 degrees). A radial gradient blends colors outward from a center point in concentric circles or ellipses. A conic gradient sweeps colors around a center point like a pie chart. Use linear for backgrounds and buttons, radial for spotlights and spheres, and conic for charts, dials, and progress rings.

Do I still need -webkit- and -moz- prefixes for CSS gradients?

Modern browsers support unprefixed gradient syntax, so prefixes are only needed when supporting very old browsers such as Android 4.3 and iOS 6. CssShift generates the prefixed -webkit- and -moz- lines plus the standard syntax in one block, so old and new browsers are both covered. Conic gradients shipped without prefixes and need no prefix lines.

How do I create a hard color stop with no smooth blend?

Place two color stops at the exact same position, for example linear-gradient(90deg, #FF0000 0%, #FF0000 50%, #0000FF 50%, #0000FF 100%). The color changes instantly at 50% instead of blending. In CssShift, drag two handles onto the same percentage on the ruler.

How do I use a CSS gradient in React inline styles?

React inline styles use camelCase property names, so CSS background becomes backgroundImage: { backgroundImage: 'linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%)' }. The React tab generates this object with a plain background fallback line for old browsers.

What fallback should I use for browsers without gradient support?

Declare a plain background color before the gradient lines. Browsers that cannot parse the gradient syntax ignore those lines and keep the solid color. CssShift automatically uses your first color stop as the fallback and marks the line with a comment.

Why does 135deg go from top-left to bottom-right?

In CSS, 0° points straight up and angles increase clockwise, so 90° points right and 135° points to the bottom-right. The gradient line runs in that direction, so the first color stop appears at the top-left. Keywords like to bottom right are an alternative to angles.

Start from a gradient that already works

Ten named presets and a set of two-colour recipes, each with the exact CSS, the angle variants and the contrast numbers to check before putting text on top.

All gradients Sunset Orange Ocean Blue Midnight Steel Blue to purple Black to white Pink to orange