Skip to content

Generate CSS gradients and box shadows

Design linear, radial and conic gradients and layered box shadows visually and copy the CSS or Tailwind classes; it all runs in your browser.

Colour stops — click the bar to add, drag to move, Delete to remove
CSS
background: linear-gradient(135deg in oklch, #ff7e5f 0%, #feb47b 100%);
Tailwind class
bg-[linear-gradient(135deg_in_oklch,#ff7e5f_0%,#feb47b_100%)]
Type
Angle135°
Selected stop
Opacity100%
Position0%
Presets
Runs in your browser · no uploadHow it works

How to use CSS gradient & shadow generator

  1. 1

    Pick gradient or box shadow

    Switch between the two editors with the tabs above the preview.

  2. 2

    Start from a preset

    Click a preset tile to load it, or keep the default and adjust from there.

  3. 3

    Adjust it visually

    Drag colour stops and set the angle, or add shadow layers and tune offset, blur and spread.

  4. 4

    Copy the code

    Copy the CSS declaration or the Tailwind class and paste it into your project.

Limits and Pro

Free with no sign-up: unlimited colour stops and shadow layers, 3 gradient types, 3 colour-mixing spaces and 24 presets.

Pro removes the ads; both editors are complete on every plan. See Pro

About CSS gradient & shadow generator

Gradients and shadows are the two CSS effects most often tweaked by trial and error in the browser's dev tools. This generator gives each one a visual editor with a large live preview, then writes the exact CSS declaration and a matching Tailwind arbitrary-value class, such as bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)], so you can paste the result straight into a stylesheet or a className.

The gradient editor builds linear, radial and conic gradients. Click the stop bar to add a colour where you click, drag a stop to move it or use the arrow keys for precise positions, and give each stop its own opacity. Linear and conic gradients take an angle, radial and conic gradients a centre point, radial gradients a circle or ellipse shape, and any of them can repeat for stripes and rings. You can also choose the colour space used for mixing: OKLab and OKLCH avoid the grey, muddy middle that classic sRGB blending produces between saturated colours, and are supported by all current browsers.

The box-shadow editor stacks as many layers as you need. Each layer has X and Y offsets, blur, spread, colour with opacity, an inset switch and a visibility toggle, and layers can be reordered, because the first one is painted on top. A preview box with adjustable size, corner radius and colours shows the effect on a light or dark surface.

Twelve presets for each editor — sunsets, colour wheels and stripes; Material elevations, layered soft shadows, neumorphism and hard offsets — give you a starting point. The tool covers gradients and box shadows only; text-shadow, filter: drop-shadow and SVG gradients aren't generated.

Privacy

Everything happens in the page: colours and settings never leave your browser and no image is uploaded. Your current gradient and shadow are saved in local storage so they are still there when you come back.

Features

Linear, radial and conic

Draggable colour stops with opacity, angle, centre, shape and repeating mode.

Multi-layer shadows

Stack, reorder, hide and inset shadow layers for realistic depth.

CSS and Tailwind

Copy a ready declaration or a Tailwind arbitrary-value class.

CSS gradient & shadow generator: frequently asked questions

How do I use the Tailwind class?
Paste it into a className like any other utility, for example class="bg-[linear-gradient(90deg,#7f00ff_0%,#e100ff_100%)]". Tailwind's arbitrary values turn the underscores back into spaces when it generates the CSS, which works in Tailwind 3 and 4. For values you reuse, add them to your theme as a named background or shadow instead.
What does the colour mixing option change?
It sets the colour space in which the browser blends between stops. sRGB, the long-time default, often produces a dull grey band between complementary colours such as blue and yellow. OKLab keeps the blend perceptually even, and OKLCH keeps hues vivid by travelling around the colour wheel. The generated CSS adds “in oklab” or “in oklch” after the angle.
Why do realistic shadows use several layers?
Real shadows have a dark, sharp core close to the object and a soft, wide falloff further away. A single box-shadow can only approximate one of those. Stacking two to five layers with increasing blur and offset, each at low opacity, mimics both, which is how Material Design's elevation levels and the Layered preset are built.
Can I make a hard-edged pie chart or stripes?
Yes. Put two stops at the same position and the colour changes instantly instead of blending: the Pie preset uses a conic gradient with doubled stops for sharp slices, and the Stripes preset uses a repeating linear gradient. Drag a stop onto its neighbour, or type the same position for both, to create a hard edge.
Does inset change how the shadow is drawn?
An inset shadow is painted inside the element's border instead of outside it, so the box looks pressed into the surface. Positive offsets then move the shadow towards the bottom right from the inside edge. You can mix inset and outer layers in one box-shadow; start from the Inner preset to see a single inset layer.

Other tasks with this tool

Related tools

All developer tools

Color palette & contrast checker

Palettes, shades, WCAG contrast and color-blind checks

Color picker from image

Pick exact colors and extract a palette from any image

App icon generator

Every iOS, Android and PWA icon size from one image

Screenshot beautifier

Gorgeous backgrounds, frames and device mockups