Box shadow generator for stacked CSS shadows
Flat cards usually need two shadows, not one: a tight dark one for the contact edge and a wide faint one for the lift. This box shadow generator keeps up to six layers in a list, draws every change on a preview box and writes the finished box-shadow declaration. The page opens with the "Layered" preset applied, so a result is on screen before you touch anything.
A layer has an x and y offset, blur, spread, a colour, an opacity and an inset switch. You can hide a layer without deleting it.
From preset to pasted CSS
- Click a preset such as "Soft", "Glow" or "Neumorphism". It fills the layer list, the box colour, the page colour and the border radius.
- Change a value with its slider or type a number next to it. A colour takes the picker or a hex code with 3 or 6 digits.
- Press "Add layer" for a new shadow. The arrow buttons change the order, the copy button duplicates a layer and the bin button removes it.
- Set "Box colour", "Page colour" and "Border radius" to your design, so the preview shows the shadow on the background you really use.
- Press "Copy CSS" for the whole declaration, or "Copy value only" for the part after the colon.
What ends up in the output line
The first layer in the list is painted on top. CSS reads a comma-separated list in that order, and the tool does not sort anything. A zero loses its unit: an offset of 0 is written as 0, not 0px.
A layer at 100 % opacity gets a lowercase hex colour such as #111827. Below 100 % it is written as rgb(0 0 0 / 15%), with the opacity as a percentage. Hidden layers are left out. If every layer is hidden, the output is box-shadow: none;. Layers sit on separate lines, and no -webkit- prefix is added.
Ranges the sliders will not cross
Offsets and spread run from -100 to 100 px, blur from 0 to 200 px, opacity from 0 to 100 % and the border radius from 0 to 100 px. All values are whole numbers. Type 500 into a blur field and it snaps to 200 when you leave the field. Six layers is the maximum, and the last remaining layer cannot be removed.
Colours must be hex. Names such as red and values such as hsl() are rejected with a message, and the field returns to the last valid colour. The preview box is a fixed 150 px square, and its area clips big shadows at the edge.
Nothing leaves this tab
The values are turned into CSS by JavaScript on the page. Pressing a button sends no request, and the network panel of your browser will show that. The copy buttons write to the clipboard. The tool stores nothing, so a reload brings back the "Layered" preset.
Frequently asked questions (FAQ)
box-shadow declaration, separated by commas. The generator does this for you when you press "Add layer", up to 6 layers, and the first one is painted on top.