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

Linear blends along a line, radial from a center ellipse, and conic sweeps around a point like a color wheel. Pick the one that matches your lighting metaphor.

How do I declare color stops?

List each colour with optional percentage or length offsets so the browser knows where transitions pivot.

What fallback should I provide?

Set a solid background-color before the gradient so older browsers or high-contrast themes still show readable content.

Do gradients hurt performance?

CSS gradients are GPU-friendly relative to giant background images, but animating many layered gradients on mobile can still cost frames — profile on real hardware.

Can I layer multiple gradients?

Comma-separate background images; the first list entry paints on top. Combine with background-blend-mode for advanced effects.

How do I match Figma specs?

Copy hex values and stop positions exactly, then tweak angle units (deg vs turn) until screenshots align.

Are exports accessible?

Ensure text over gradients meets WCAG contrast; use overlays or scrims if brand colours collide with copy.

Does the tool save presets?

Bookmark or copy CSS into your design tokens file — nothing syncs to a server automatically.

Gradient Maker

Generate Live

Build CSS linear and radial gradients with live preview.

About this tool

Gradient Maker — Build CSS linear and radial gradients with live preview. Free, fast and private. Runs entirely in your browser at Quick Calci Tools.

Examples

Common scenarios for the Gradient Maker.

Hero linear fade

type: linear
angle: 135

background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);

Radial spotlight

type: radial

Radial gradient string with center highlight for cards.

Who uses the Gradient Maker?

Common scenarios and audiences for this tool.

Product designers

Translate brand gradients into developer-ready snippets without hand-typing stop lists.

Frontend engineers

Prototype hero backgrounds and glassmorphism underlays directly in CSS.

Marketers

Refresh campaign landing pages to match keynote decks pixel-for-pixel.

Game UI modders

Experiment with conic gradients for health wheels and cooldown rings.

Students

Learn how modern browsers interpolate color spaces by previewing edits live.

Frequently asked questions

Everything you need to know about the Gradient Maker.