apprun.icuDesign tool

Design tool · Live CSS

Write CSS by eye: shadows, gradients and radii

Stack shadow layers, drag gradient colour stops and set a radius for every corner, then read the declaration as it changes. Colours accept hex, rgb(a), hsl(a) and CSS names, every number has a slider, and the finished rule can be copied or downloaded as a stylesheet.

Three tools one pageLive preview as you typeColour parsing hex, rgb, hsl, namesExport copy or style.css

1 · Shadow layers

Each layer is offset-x, offset-y, blur, spread and colour. The first layer in the list paints on top of the others.

2 · Shadow presets

replaces the stack

Presets overwrite the layer stack, so copy anything you want to keep first.

Live preview

box shadow

Previews are decorative. The same rule can look different once it lands on a real element with its own size, background and stacking context.

CSS output

box-shadow
Read-only. Select the text, or use the copy button.

Every declaration

three snippets and the longhand corners
box-shadow
background-image
border-radius
Longhand cornersthe same radii, one declaration per corner

Nothing leaves this tab. The download writes a small stylesheet with a placeholder selector you can rename.

How to use CSS Generator

Everything below runs in this tab. Nothing is uploaded, and no account is needed.

Step by step

  1. Pick a tab in Choose a generator. Box shadow, gradient and border radius each keep their own state, so you can switch back and forth without losing work.
  2. For shadows, add or remove layers and set offset-x, offset-y, blur, spread and colour for each one. Drag the layer order with Up and Down; the first layer in the list paints on top.
  3. For gradients, choose linear, radial or conic, set the angle or the centre position, then move the colour stops. Tick Repeating to tile the gradient instead of stretching it.
  4. For corners, set a horizontal and a vertical radius on each corner. Keep Linked on for circular corners, or turn it off for elliptical ones, or start from a preset.
  5. Copy a single declaration from the output card, copy all three from Every declaration, or download style.css. Every value is plain CSS.

Details and limits

Shadow syntax order

A shadow is written offset-x offset-y blur spread colour, in that order, and the first layer listed paints on top of the ones after it. Blur and spread are optional, but you cannot skip one and keep the next: a shadow with a spread must also state a blur. The inset keyword sits with the colour and moves the shadow inside the border box instead of behind it.

Spread can be negative

Spread grows the shadow's silhouette when it is positive and shrinks it when it is negative. A negative spread larger than the blur radius leaves a hard-edged offset shape, which is how outline, long-shadow and sticker effects are built. Blur is a Gaussian, so a very large blur on a big element costs fill rate on every repaint.

Radial shape versus radial size

circle and ellipse choose the shape; closest-side, farthest-side, closest-corner and farthest-corner choose how far the gradient reaches, measured from the centre you set against the box it is painted on. An ellipse can have very different radii, so the same stops look different on a wide card than on a square one. A conic angle is measured clockwise from the top, not from the right.

Percentages resolve against the element

A percentage in border-radius is resolved against the element's own border box: horizontal radii against its width, vertical radii against its height. That is why 50% is a circle on a square element and an ellipse on a rectangular one, and why the pill trick of 999px is clamped to half the height. Percentage corners also collapse when the two axes of a corner overlap, so extreme values are scaled down proportionally.

Read the guide on accessible colour contrast · Check the colours you picked for contrast · Install for offline use

Frequently asked questions

How do I write a box shadow in CSS?

Use box-shadow followed by one or more layers separated by commas. Each layer is offset-x offset-y blur spread colour, for example 0 12px 28px -8px rgba(12, 21, 53, 0.22). Add the inset keyword to draw the shadow inside the element. The first layer is painted on top, so list the tightest shadow first and the widest last.

What does the spread value do in a box shadow?

Spread resizes the shadow before it is blurred. Positive values make it larger than the element, negative values make it smaller, and a negative spread bigger than the blur leaves a hard offset copy with no soft edge. A spread of zero gives the shadow the same silhouette as the element itself.

What is the difference between linear, radial and conic gradients?

A linear gradient runs along an angle and blends stops from one edge to the other. A radial gradient starts at a point and spreads outward, with a circle or ellipse shape and a sizing keyword such as farthest-corner. A conic gradient sweeps around a point, so the stops rotate like the hands of a clock rather than moving outward.

How do I make a circle or a pill with border radius?

Set 50% on every corner for a circle on a square element, or a very large value such as 999px on a short element for a pill. Because percentages resolve against the element's own box, the same rule gives an ellipse on a rectangle. Each corner can also take two values, one horizontal and one vertical, for elliptical corners.

Can I use these declarations in Tailwind, Sass or plain CSS?

They are ordinary CSS declarations, so they paste anywhere a declaration is allowed. In Tailwind use them as arbitrary values, in Sass assign them to a variable or pass them to a mixin, and in a stylesheet drop them into any rule. Only modern syntax is emitted, so current browsers need no vendor prefixes.

Are my colours uploaded anywhere?

No. Parsing, previewing and formatting all happen in this tab with the browser's own CSS parser. Nothing is sent to a server, nothing is stored between visits, and closing the tab discards every value.