Loading page
About this tool
Build a CSS box-shadow and copy the ready-to-use rule.
The CSS Box Shadow Generator assembles a CSS box-shadow value in the exact order the spec requires — offset-x, offset-y, blur-radius, spread-radius, colour, with an optional leading inset keyword — from sliders rather than trial-and-error edits. Offsets run from −50 px to 50 px, blur from 0 to 100 px and spread from −50 px to 50 px, and it returns both the bare value and the complete `box-shadow: …;` declaration ready to paste. It is for anyone who can picture the shadow they want but keeps forgetting whether blur comes before spread.
Open CSS Box Shadow Generator on AltFTool — it loads instantly in your browser.
Drag the 'Horizontal offset (px)' and 'Vertical offset (px)' sliders — they are range sliders, not typed fields, running from -50 to 50 and starting at 4 and 6, with each current value printed underneath it
Drag 'Blur (px)' (0 to 100, starts at 12) and 'Spread (px)' (-50 to 50, starts at 0), then type any CSS colour into the 'Color' text box, which is pre-filled with rgba(0,0,0,0.25)
Tick the 'Inner shadow' checkbox under Inset to prefix the value with 'inset '. The Result panel updates live — no Generate button — showing the value captioned 'box-shadow value' with the whole declaration in the 'Full rule' card, 'box-shadow: 4px 6px 12px 0px rgba(0,0,0,0.25);' at the defaults; press Copy for the clipboard or Download to save box-shadow-generator.txt
Emits the four lengths in spec order with inset first, so you never ship a rule the browser silently drops.
Independent controls make the difference obvious: blur softens the edge, spread grows or shrinks the shadow's shape before blurring.
Returns both the raw value for use inside a longer shadow list and the full declaration for a single-shadow rule.
offset-x, offset-y, blur-radius, spread-radius, then colour — with the optional inset keyword before them all. Only the two offsets are required; omitting blur and spread makes both 0, and omitting the colour makes the shadow use the element's currentColor.
Spread changes the size of the shadow shape before any blurring — a positive spread grows it in every direction, a negative one shrinks it — while blur softens the edge outward from that shape. A 0 px blur with a 4 px spread gives a hard 4 px ring; a 20 px blur with 0 spread gives a soft halo the same size as the element.
Turn on inset, which prefixes the value with the inset keyword and draws the shadow inside the element's padding box instead of outside its border box. Inner shadows are common on inputs and pressed buttons, and the same offset, blur and spread values apply, just facing inward.
Yes — box-shadow takes a comma-separated list, and the first shadow in the list paints on top of the ones after it. Generate each layer here, then join the raw values with commas, which is how layered elevation styles build a tight contact shadow plus a wide ambient one.