Images & Media / Design & Icons

CSS Gradient Generator

A CSS gradient generator builds the linear-gradient() or radial-gradient() value for you, by letting you place colour stops on a bar instead of typing the syntax by hand. Set the type, the angle or the centre point, and each stop's colour, alpha and position, and the CSS and the Tailwind class update as you work. The whole preview is computed inside the page — no upload, no account, no server.

How to use

1
Choose a gradient type
Linear follows an angle you set; Radial spreads outwards from a centre point you place. Switching between them keeps your colour stops, so you can compare the two on the same palette without rebuilding it.
2
Set the angle or the centre
In Linear mode drag the dial, type a degree value or use the arrow keys to nudge it — 0° points up, 90° points right, and the two are not interchangeable. In Radial mode choose circle or ellipse, then click or drag anywhere in the square to move the centre.
3
Edit the colour stops
Drag a handle along the bar under the preview to move a stop, and click a swatch to select the stop you want to edit. Set its colour with the picker or by pasting a value such as #6366f1, #aabbccdd, rgba(99, 102, 241, 0.5) or transparent, then set its alpha and exact position. Add stop inserts a new one in the widest gap with an interpolated colour, so the picture does not jump while you work.
4
Read the preview
The checkerboard behind the gradient is there so transparency is visible rather than hidden. If a stop ends up to the left of the one before it, CSS draws it at the earlier position; the warning under the preview says so and offers a button that writes the corrected positions back into the list.
5
Copy the code
Copy the CSS rule, or either of the two Tailwind forms — the arbitrary value works in every version, the native utilities are the idiomatic v4 spelling. The CSS rule carries a background-color fallback so renderers that ignore gradients still show a flat colour, and you can drop that line if you know your target does not need it.

Key facts

Gradient syntaxA linear gradient is written background-image: linear-gradient(<angle>, <colour> <position>, ...) and accepts any number of colour stops. The angle is measured clockwise from the upward direction: 0deg points up, 90deg right, 180deg down, 270deg left. A stop given without a position is distributed evenly between its neighbours.Source:CSS Images Module Level 3 (W3C)
Premultiplied interpolationGradients interpolate their colours in premultiplied space, so a fade from an opaque colour to transparent keeps that colour's hue all the way down instead of drifting towards grey. The transparent keyword is defined as rgba(0, 0, 0, 0), which is why an explicit rgba() with a zero alpha is the safer spelling in old engines that interpolated alpha directly.Source:CSS Images Module Level 3 (W3C)
Corner keywords are not anglesto top, to right, to bottom and to left are exactly equivalent to 0, 90, 180 and 270 degrees. The corner keywords are not equivalent to any fixed angle: to top right points at the corner of the box being painted, so the effective direction changes with the element's aspect ratio.Source:CSS Images Module Level 3 (W3C)
Stop positions are monotonicIf a colour stop's position is less than the position of the stop before it, it is set to that earlier position. Positions are only ever raised, and the raised value becomes the reference for the next stop, so a decreasing pair collapses onto a single point.Source:CSS Images Module Level 3, §3.4.1 (W3C)
Browser supportUnprefixed linear-gradient() and radial-gradient() are supported by every current browser and have been since around 2013. Internet Explorer 9 needed an SVG fallback and IE 10 needed the old -ms- prefix, which is the reason generators still emit a background-color fallback alongside the gradient.Source:MDN browser compatibility data

Frequently asked questions

Does this tool support transparent gradients?

Yes. Every colour stop carries its own alpha value next to its colour, so a gradient can fade from opaque to fully transparent, or keep one end only partly see-through. The preview sits on a checkerboard, which means transparent areas read as transparent instead of just looking pale. When a stop's alpha is below 100% the generated CSS switches that stop to rgba() — a six-digit hex value cannot carry transparency, and the eight-digit #rrggbbaa form is supported less widely than rgba(). One detail is worth knowing before you fade to the transparent keyword: CSS interpolates gradients in premultiplied space, so an opaque red fading to transparent stays red the whole way rather than turning muddy brown in the middle. Older engines that interpolated alpha directly did produce that brown midpoint, and the fix there was to write rgba(255, 0, 0, 0) instead of the keyword. Either way the alpha is real transparency, not a blend towards white, so the checkerboard or whatever sits behind the element will show through.

How do I use the generated gradient in Tailwind CSS?

Paste the arbitrary-value class the tool gives you. It hands the whole gradient to the browser as-is, so it works in any Tailwind version and keeps the exact colours, positions and angle you built. Two details are what make it valid: the image: prefix, because bg-[...] on its own is ambiguous and Tailwind needs to know this is a background image rather than a background colour; and the underscores, because a class attribute is separated by whitespace, so every space inside the value is written as an underscore and Tailwind turns it back into a space when it generates the CSS. If you are on Tailwind v4 and prefer idiomatic utilities, the second line uses the native ones — bg-linear-[135deg] for the angle plus from-, via- and to- for the stops and their positions. Those three slots are the limit: a gradient with four or more stops has no native form, which is why the arbitrary value stays on the page as the general case. Tailwind v3 called the direction utilities bg-gradient-to-r and so on; v4 renamed them to bg-linear-to-r. Remember that to top, to right, to bottom and to left equal 0, 90, 180 and 270 degrees, but the diagonal keywords do not equal 45 or 135 degrees — they depend on the element's shape.

Which browsers support CSS gradients?

Every current browser does, and has for a long time: unprefixed linear-gradient() and radial-gradient() have been available since around 2013. What is still worth keeping is the fallback line the tool writes for you. The rule declares background-color first and background-image second, so a renderer that ignores gradient functions — an older WebView, some email clients, an HTML-to-image pipeline — shows a flat colour close to the first stop rather than nothing at all. Without it the element is fully transparent there, and any text sitting on it can become unreadable. Two related habits save trouble later. First, prefer background-image to the background shorthand when you also set background-size, background-position or background-repeat, because the shorthand resets all of those to their initial values. Second, keep in mind that the gradient is painted at the element's actual size, so a gradient on a box that grows and shrinks with its content will visibly change its angle as it resizes; put it on a fixed-height element if you need the angle to stay put.

Why is a colour stop drawn somewhere other than where I put it?

Because CSS gradients are monotonic. A stop whose position is smaller than the position of the stop before it is drawn at the earlier position instead. The specification does not reorder the stops and does not report an error — the value is raised, and the raised value then becomes the reference for the next stop along the line. So a gradient with stops at 50% and 20% renders as 50% and 50%: everything past the drop collapses onto the same point. This is why dragging a handle past its neighbour pins the handle instead of moving it, and why the list shows the corrected position next to the one you typed. If nothing warns you, the mismatch looks like a bug in the tool rather than a rule of the language. There is one legitimate use for two stops at the same position: it produces a hard edge with no blend between them, which is how you build a striped background from a single gradient.

Can I animate a gradient?

Not by transitioning the gradient value itself: background-image is not an interpolable property, so a transition between two gradients snaps from one to the other instead of tweening. There are two workarounds that do work, both in CSS. The first keeps a single oversized gradient and animates background-position or background-size, which browsers interpolate smoothly — a wide gradient sliding beneath a fixed window reads as movement and costs no extra assets. The second registers the angle as a typed custom property with the @property at-rule, declaring syntax: "<angle>", which makes it an animatable value so a transition from 0deg to 360deg tweens frame by frame. Without @property a plain custom property is treated as an unparseable token, and the animation jumps instead. What this tool generates is the static gradient the animation starts from: build the look here, then wrap it in the animation you want.

Related tools

Favicon Generator

Generate a favicon.ico plus 16, 32, 64 and 128 px PNG icons from a letter, initials or an image. Preview them in a real browser tab, then download the set.

Base64 in JSON

Encode and decode Base64 in the browser, including URL-safe Base64 and the payload section of a JWT. Runs locally; Base64 is encoding, not encryption.

Word Counter

Count words, characters and paragraphs as you type, and check the result against social platform and meta description limits. Runs entirely in your browser.