Design linear, radial and conic gradients in the browser. You can move colour stops on a bar, set the angle with a dial, and see the result as a background, gradient text, a button or a gradient border.

The code updates as you edit. You can copy it as plain CSS with a fallback, as Tailwind CSS 4 classes, or as a reusable Bootstrap 5 class with example markup. The URL keeps your settings, so a link brings back the same gradient.

Preview

Preview mode
Preview size

Gradient text

Get started
Gradient border A transparent border shows the gradient painted on the border box.

Gradient

Type
Angle

OKLab and OKLCH avoid the grey middle that sRGB produces between distant hues. The CSS output adds an sRGB fallback line.

Colour stops

Click the bar to add a stop. Drag a stop to move it, or drag it down off the bar to remove it. A focused stop moves with the arrow keys (Shift for 10%); Delete removes it.

Hard stops make each colour a solid band that runs until the next stop.

Selected stop

Colour
Opacity

Type a hex, rgb(), hsl(), oklch() or named colour.

Code

CSS
.gradient-bg {
  background-color: #bb6483;
  background-image: linear-gradient(135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);
}

The solid background-color is a fallback that shows if the gradient fails to load or render.

Presets

24 starting points. Pick one, then edit it.

    How to use it

    1. Choose a gradient type: linear, radial or conic. Turn on Repeating to tile the stop pattern.
    2. Edit the colour stops. Click the bar to add a stop, drag a stop to move it, or drag it down off the bar to remove it. Select a stop to change its colour, opacity and position.
    3. Set the direction. Use the angle dial or the arrow buttons for linear and conic gradients, or set the shape, size and centre for radial gradients.
    4. Pick a colour interpolation. sRGB matches the classic browser blend; OKLab and OKLCH keep the midpoint bright between distant hues.
    5. Open the CSS, Tailwind CSS 4 or Bootstrap 5 tab and copy the code. Use Copy link to save or share the gradient.

    Linear, radial and conic gradients

    A linear gradient changes colour along a straight line. The angle sets the direction: 0deg points to the top, 90deg to the right and 180deg to the bottom.

    A radial gradient spreads out from a centre point. Its shape is an ellipse by default or a circle, and its size keyword (closest-side, closest-corner, farthest-side or farthest-corner) sets where the last stop ends.

    A conic gradient sweeps colours around a centre point, like the hands of a clock. Stop positions are fractions of a full turn, so conic gradients suit pie charts, colour wheels and loading rings. Each type has a repeating- version that repeats the stop pattern.

    Colour stops and hard stops

    Each colour stop is a colour plus a position. The browser blends between neighbouring stops; before the first stop and after the last stop the colour stays solid.

    When two stops share a position, the change between them is a sharp edge instead of a blend. CSS also accepts two positions on one stop, such as #38bdf8 0% 50%, which paints a solid band. The Hard stops switch uses this syntax to turn every stop into a band that runs to the next stop.

    Stops can be partly transparent. The checkerboard behind the preview shows where the gradient lets the page show through.

    Smoother gradients with OKLab and OKLCH

    By default browsers blend hex, rgb() and hsl() colours in the sRGB colour space. Between distant hues, such as yellow and blue, the midpoint is often grey or dull.

    CSS Color Level 4 adds an interpolation clause, for example linear-gradient(90deg in oklch, …). OKLab blends in a space where lightness is perceptually even, so the midpoint keeps its brightness. OKLCH also blends the hue around the colour wheel, which gives more saturated midpoints.

    Chrome and Edge 111+, Safari 16.2+ and Firefox 127+ support the clause. Older browsers ignore the whole declaration, so the generated CSS writes a plain sRGB line first as a fallback.

    Using the output in Tailwind CSS 4 and Bootstrap 5

    Tailwind CSS 4 renamed bg-gradient-to-* to bg-linear-*. It accepts any angle, such as bg-linear-135, together with from-, via- and to- colour utilities. Tailwind blends these in OKLab by default, so the generator adds the /srgb or /oklch modifier when you choose another interpolation. Radial, conic, repeating, hard-stop and gradients with more than three stops are written as one arbitrary-value class, bg-[…], with underscores in place of spaces.

    Bootstrap 5 has no utility for custom gradients. Its .bg-gradient class only adds a light white-to-transparent overlay, var(--bs-gradient), on top of a .bg-* colour. The Bootstrap tab gives you a small class to add after bootstrap.min.css, plus example markup that uses Bootstrap's spacing and text utilities.

    Use it with our free components: CSS buttons · Glassmorphism UI kit · Colour palettes

    Frequently asked questions

    Why does my CSS gradient look grey in the middle?

    Browsers blend hex and rgb() colours in sRGB by default, and the halfway point between distant hues such as yellow and blue loses brightness. Switch the interpolation to OKLab or OKLCH, which writes linear-gradient(… in oklch, …), or add a brighter colour stop in the middle.

    How do I make a gradient border that works with border-radius?

    Give the element a transparent border and two background layers: a solid colour clipped to the padding box and the gradient on the border box, for example background: linear-gradient(#fff, #fff) padding-box, linear-gradient(…) border-box. Unlike border-image, this keeps rounded corners. Choose Border in the preview to get the code.

    How do I make gradient text in CSS?

    Set the gradient as background-image, then add background-clip: text and color: transparent so the gradient shows only inside the letters. Keep -webkit-background-clip: text for older Safari versions. Choose Text in the preview to get the code.

    Does bg-gradient-to-r still work in Tailwind CSS 4?

    Yes. Tailwind CSS 4 still compiles bg-gradient-to-r, but the documented name is now bg-linear-to-r, and angles such as bg-linear-45 are available. In version 4 these gradients blend in OKLab by default, so add /srgb if you need the version 3 look.

    Can I use the generated CSS in older browsers?

    Plain linear, radial and repeating gradients work in all current browsers, and conic gradients work in all major browsers released since late 2020. If you use OKLab or OKLCH interpolation or oklch() colours, the output starts with an sRGB fallback line that older browsers use instead. For opaque gradients a solid background-color is included as a last fallback.

    More free tools