Which browsers support these gradients?

linear-gradient and radial-gradient work without prefixes in every modern browser, and conic-gradient needs Chrome 69+, Safari 12.1+ or Firefox 83+. The first background line in the output is a solid fallback — the average of your stops — for very old browsers.

How do I use the gradient with Tailwind CSS?

Copy the Tailwind arbitrary value, for example bg-[linear-gradient(90deg,#f97316_0%,#8b5cf6_100%)], straight into your class attribute. Spaces are already replaced with underscores as Tailwind requires, and it works in Tailwind v3 and v4.

Does the exported PNG match the CSS?

Yes. The PNG is redrawn on a canvas following the CSS rules: the linear gradient line length is computed from the angle, radial gradients use the default farthest-corner size and conic gradients start at your angle, so the image matches the preview at any aspect ratio. The repeating option currently affects the CSS output only.

Can color stops be transparent?

Yes. Select a stop and lower its opacity; the output switches to an rgba() color, the checkerboard preview shows the transparency, and exported PNGs keep the alpha channel — handy for gradient overlays on photos.

🌈

🌈CSS Gradient Generator - Linear, Radial & Conic Gradients with PNG Export

A good gradient lifts a background, button, card or poster, and this tool turns CSS gradients into direct manipulation. Click the stop bar to add a color stop, drag it to reposition, change its color and opacity, and press Delete to remove it. Set the direction of a linear gradient with the angle dial (hold Shift to snap to 15°), choose an ellipse or circle and move the center of a radial gradient, set the start angle of a conic gradient, or make any of them repeating. The preview sits on a checkerboard so semi-transparent stops are obvious. The presets gallery offers ocean, sunset, aurora, rainbow, color wheel and more as starting points, and a random button suggests new palettes. The CSS output includes a solid fallback color, and Tailwind users can copy a ready bg-[linear-gradient(...)] arbitrary value class. Need an image instead? Export a PNG at 1920×1080, phone wallpaper, square, Open Graph or any custom size, drawn to match the CSS exactly.

Free · No sign-up · Runs in your browserLast updated: 2026-10-26

Loading tool...

How to use CSS Gradient Generator

1Pick linear, radial or conic — or start from a preset
2Add and drag color stops, then adjust colors, opacity and angle
3Copy the CSS or Tailwind class, or export a PNG at the size you need

FAQ

Which browsers support these gradients?: linear-gradient and radial-gradient work without prefixes in every modern browser, and conic-gradient needs Chrome 69+, Safari 12.1+ or Firefox 83+. The first background line in the output is a solid fallback — the average of your stops — for very old browsers.
How do I use the gradient with Tailwind CSS?: Copy the Tailwind arbitrary value, for example bg-[linear-gradient(90deg,#f97316_0%,#8b5cf6_100%)], straight into your class attribute. Spaces are already replaced with underscores as Tailwind requires, and it works in Tailwind v3 and v4.
Does the exported PNG match the CSS?: Yes. The PNG is redrawn on a canvas following the CSS rules: the linear gradient line length is computed from the angle, radial gradients use the default farthest-corner size and conic gradients start at your angle, so the image matches the preview at any aspect ratio. The repeating option currently affects the CSS output only.
Can color stops be transparent?: Yes. Select a stop and lower its opacity; the output switches to an rgba() color, the checkerboard preview shows the transparency, and exported PNGs keep the alpha channel — handy for gradient overlays on photos.