العربية

CSS shadow generator

Compose inset or outer box-shadow layers with a preview and CSS you can copy or download.

Numbers: 0–9, ٠–٩ or ۰–۹, with a decimal point or ٫. No exponents or grouping separators. Local processing without uploads or automatic storage. Output up to 16 KiB.

1–8 layers in the displayed order; the first is on top. Offsets and spread ±1000px, blur 0–200px, up to 3 decimal places. The bounded preview window may clip shadow edges; downloaded CSS retains the values.

Shadow layer 1

How to use

Enter the first layer’s values and color, selecting inset when needed. Add layers and order them with the move buttons. Generate, inspect the preview, then copy or download the .shadow rule.

Try an example

Offsets 0 and 4, blur 12, spread 0 and color #00000080 produce box-shadow: 0px 4px 12px 0px #00000080, a black layer with approximately half opacity.

Support & limits

The first layer is on top; moving layers changes paint order. Negative spread is valid; negative blur is rejected. Alpha comes from HEX; the CSS does not change the element’s layout dimensions. The bounded preview window may clip large shadow edges, while the file retains all values. This is box-shadow, not text-shadow or an image effect.

Common questions

Does the first shadow always hide later layers?

It is painted above them in CSS order, but visibility depends on the offsets, colors, alpha and inset settings.

Related tools

Color format converter

Convert a color between HEX, RGB and HSL, including alpha, with a validated preview.

CSS gradient generator

Create a linear or circular radial gradient from explicit colors and positions, with a preview and CSS download.

Grid and Flex layout builder

Generate a bounded CSS layout, a numbered-child preview and a downloadable static HTML example.