CSS Gradient Generator

What is CSS Gradient Generator?

The CSS Gradient Generator is a free, in-browser tool for web designers and front-end developers who want to build gradients visually instead of writing the syntax by hand. Choose linear, radial, or conic — with an optional repeating variant — then edit color stops on a draggable preview bar or in per-stop rows with HEX color and position fields. Radial gradients expose circle/ellipse shape, a size keyword (closest-side, closest-corner, farthest-side, farthest-corner) and an at X% Y% center, while conic gradients take a starting angle and center. You can stack multiple gradient layers into a single background separated by commas, generate a random gradient, apply curated palette presets, rotate every stop's hue, and copy the ready-to-paste background rule.

How to use CSS Gradient Generator

1. Pick the gradient type — Linear, Radial, or Conic — and toggle Repeating in options for a repeating pattern.
2. Drag the stops along the preview bar to reposition them, click an empty spot on the bar to add a stop, or double-click a stop to remove it.
3. Fine-tune each stop with its HEX color and position fields, or use the eyedropper (where supported) to sample a color from your screen.
4. For radial gradients set the shape (circle or ellipse), a size keyword, and the center X/Y; for conic set the starting angle and center.
5. Add more layers to stack gradients into one background, try Random, apply a palette preset, or rotate every hue at once.
6. Copy the generated CSS background rule and paste it into your stylesheet.

Examples

Linear, 90deg, #4f86f7 at 0% and #9333ea at 100%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%);

Radial, ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%

background: radial-gradient(ellipse farthest-corner at 30% 30%, #ffffff 0%, #4f86f7 100%);

Layer 1 linear 90deg; Layer 2 radial circle at 50% 50%

background: linear-gradient(90deg, #4f86f7 0%, #9333ea 100%), radial-gradient(circle farthest-corner at 50% 50%, #ffffff88 0%, #ffffff00 100%);

Frequently asked questions

Which gradient types and options are supported?

Linear, radial, and conic gradients, each with an optional repeating variant. Radial adds circle/ellipse shape, a size keyword (closest-side, closest-corner, farthest-side, farthest-corner) and an at X% Y% center; conic adds a starting angle and center. You can also stack multiple layers into one background.

How does the draggable stop bar work?

Drag any stop along the bar to change its position, click an empty part of the bar to insert a new stop with an interpolated color, and double-click a stop to remove it (a minimum of two stops is kept). Each stop also has HEX color and position fields below the bar.

Can I sample a color from my screen?

Yes, on browsers that support the EyeDropper API. When available, an eyedropper button appears next to each stop; click it and pick any pixel on screen. You can always type a HEX value or use the native color chip instead.

What do Random, the palettes, and hue rotate do?

Random replaces the active layer with a fresh randomized gradient, the palette presets swap the active layer's stops for a curated color set, and Rotate hue shifts the hue of every stop in every layer at once. They only change the gradient when you click them.

Are my colors or CSS uploaded anywhere?

No. The gradient is built entirely in your browser with local string and color math — no colors, CSS, or settings are ever sent to a server, so it works offline and keeps your work private.