Pick any HEX, RGB, or HSL color or a Tailwind color, choose a direction, and copy CSS, Tailwind classes, or an AI prompt.
background: linear-gradient(to right, #3b82f6 0%, #a855f7 50%, #ec4899 100%);CSS · Tailwind
This generator builds a two- or three-stop gradient from a direction and a set of colors, then writes it out as a CSS background declaration, a list of Tailwind CSS v4 classes, or a prompt for an AI coding assistant. The notes below explain what each control changes in the code, where the CSS and Tailwind versions differ, and what to check before a gradient goes behind real text.
Direction picks the gradient function and where it starts. The eight linear options (To Top through To Top Left) become linear-gradient(to right, …) and the matching keyword. The nine conic options become conic-gradient(), centered or placed at an edge or corner with at top, at bottom left and so on. The nine radial options become radial-gradient(ellipse at …), so the color spreads from the center or from an edge.
Color stops are Start, Middle and End. The Middle stop switch adds or removes the middle color. In the CSS output the stops sit at 0%, 50% and 100%; with the middle stop off you get a plain two-color blend at 0% and 100%. Shuffle (or the G key when focus is not in a field) picks a random direction and three random Tailwind colors.
Each stop opens a color picker with two modes. Custom CSS accepts HEX, RGB or HSL, has an opacity slider, and shows an eyedropper in browsers that support the EyeDropper API (Chrome and Edge at the time of writing). Tailwind colors lets you search the default palette, plus white, black and transparent.
The CSS tab returns one background declaration and accepts any valid color. The Tailwind tab returns utility classes: a color picked from the Tailwind palette stays readable as a token such as from-blue-500, while a custom color becomes an arbitrary value such as from-[#3b82f6]. Spaces inside a custom value (for example in an rgba() color) are replaced with underscores, because Tailwind class names cannot contain spaces. The AI prompt lists the same direction and color stops and asks for CSS, Tailwind classes and a small HTML example with readable text.
Here is the default gradient in both forms. The CSS goes in a stylesheet rule; the classes go on the element itself.
<!-- CSS tab -->
<style>
.hero {
background: linear-gradient(to right, #3b82f6 0%, #a855f7 50%, #ec4899 100%);
}
</style>
<!-- Tailwind tab (Tailwind CSS v4) -->
<section class="bg-linear-to-r from-blue-500 via-purple-500 to-pink-500">
...
</section>Two things change between the tabs. First, Tailwind v4 defines its palette in OKLCH, and the CSS tab writes those colors as their nearest HEX values. On a wide-gamut display, the Tailwind build can show a few colors, especially saturated blues, pinks and greens, a little more vividly than the HEX version.
Second, Tailwind v4's gradient utilities blend colors in the OKLab color space, while a plain linear-gradient() with HEX colors blends in sRGB. The difference shows in the middle of the gradient: a blue-to-yellow blend in sRGB passes through a grayish middle, while OKLab keeps it brighter. If you need the Tailwind gradient to match the CSS exactly, add the /srgb modifier to a linear direction, for example bg-linear-to-r/srgb.
Tailwind v4 has first-class utilities for these shapes: bg-radial and bg-conic, with an optional position or angle. bg-radial-[at_top] starts the ellipse at the top edge, bg-conic-[at_bottom_left] moves the center of a conic sweep, and bg-conic-180 starts the sweep at 180 degrees. They combine with the same from-, via- and to- classes as linear gradients.
The Tailwind v3 pattern of an arbitrary background such as bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] does not work in v4: the stop list now expects a position variable that only the bg-linear-, bg-radial- and bg-conic- utilities set, so the background computes to none. This tool copies the v4 form, such as bg-radial-[at_top] or bg-conic-[at_top_right]. If an older snippet uses the v3 form, rewrite it the same way.
<!-- Radial from the top edge -->
<div class="bg-radial-[at_top] from-sky-400 to-indigo-900"></div>
<!-- Conic sweep from the bottom-left corner -->
<div class="bg-conic-[at_bottom_left] from-amber-300 via-rose-500 to-amber-300"></div>A gradient has no single background color, so a contrast checker needs more than one reading. Test your text color against the lightest stop, the darkest stop and the middle, and use the lowest result. WCAG 2 asks for 4.5:1 for body text and 3:1 for large text (about 24px regular or 19px bold). With a vivid three-color blend, white text often passes on the darker ends and fails in the middle.
When it fails, reduce the contrast range of the gradient itself, keep text over the darker part, or add a dark scrim layer between the gradient and the text. The transparent color in the picker is useful for that: a gradient from black at 70% opacity to transparent, placed over an image, is a common way to keep a caption readable.
Updated