Box Shadow Generator
Builds a CSS box-shadow string in the browser. Set offset-x, offset-y, blur, spread, a hex color, and optional inset, then copy the CSS as text. Lengths are pixels. This is not a component library.
Box shadow generator
Client-side only. Values are not sent to a server. This is a CSS string generator, not a component library. Input is not sent.
How to use
- Set offset-x, offset-y, blur, and spread in pixels. The default shadow is 4px 8px 16px 0px #000000.
- Pick a hex color and optionally check inset. Read the CSS as text. Copy uses the clipboard on this device only.
- Nothing is sent to a server. This is not a component library. Refreshing the page clears the form.
Results
4px 8px 16px 0px #000000Text only. Preview uses style.boxShadow from the validated string. Client-side only. Not sent. Not a component library.
Runs in your browser. Nothing is uploaded.
Frequently asked questions
What is the CSS box-shadow property order?
The string is offset-x, offset-y, blur-radius, spread-radius, then color. The worked example 4, 8, 16, 0 and #000000 becomes 4px 8px 16px 0px #000000. When inset is on, inset is written first: inset 4px 8px 16px 0px #000000. You copy that string into a stylesheet.
What does the inset checkbox do?
Inset writes the CSS inset keyword at the start of the box-shadow string, which draws the shadow inside the box. Off produces an outer drop shadow. The checkbox is a boolean only; it does not change the length values.
Which units does this box shadow generator use?
Lengths are pixels only. Offset-x and offset-y accept −200 to 200, blur accepts 0 to 200, and spread accepts −50 to 50. Values outside those ranges or non-numeric input fail closed. Color must be #rgb or #rrggbb with a leading #; output is lowercase six-digit hex, so #fff becomes #ffffff.
Is this client-side? Do I need an account?
Yes, it is client-side only. There is no signup. Offsets, blur, spread, color, and inset never leave the browser. Tallymill does not save what you enter. Refreshing the page clears the form.
Is this a component library?
No. This page is a CSS string generator. It is not a component library and not a design-system product. There is no component download. The optional preview only sets style.boxShadow from the already-validated string.