Design CSS box shadows with sliders for offset, blur, spread, color, and opacity. Watch the live preview update instantly, then copy clean code or download a .css snippet - all processing stays in your browser.
Technical Specifications
Value ranges and output rules used for every shadow.
| Specification |
Details |
| Offset X / Y |
-100px to 100px each, integers, adjustable by slider or number field |
| Blur radius |
0px to 100px, integers; 0 gives a hard edge |
| Spread radius |
-50px to 50px, integers; negative values shrink the shadow |
| Shadow color |
Hex picker plus text field (#rgb or #rrggbb); opacity slider 0 to 100 percent mapped to RGBA alpha |
| Position |
Outset by default; Inset checkbox prepends the inset keyword |
| Output syntax |
box-shadow: offset-x offset-y blur spread rgba(r, g, b, a) [inset]; one declaration per line |
| Presets |
6 built-in styles: Soft Card, Hard Offset, Blue Glow, Neumorphic, Inset Pressed, Large Diffuse |
| Processing location |
100% client-side JavaScript in your browser memory; nothing is uploaded |
| Export |
Copy declaration to clipboard or download a plain .css snippet file |
| Usage limit |
None - generate unlimited shadows for free, no signup required |
Understanding CSS Box Shadows
The CSS box-shadow property adds depth to cards, buttons, modals, and panels without images. Its full order is offset-x, offset-y, blur-radius, spread-radius, color, and the optional inset keyword. Offsets position the shadow, blur diffuses its edge, spread resizes its base shape, and color with alpha sets its tone and transparency.
Offset, blur, and spread in practice
Small offsets with medium blur, such as 0 4px 12px, create the soft lifted-card look used across dashboards. Large offsets with zero blur, such as 8px 8px 0, create the hard neo-brutalist edge seen in posters and playful interfaces. Positive spread grows the shadow outward for a halo, while negative spread pulls it tight for a crisp outline. Pair shadows with rounded corners from the Border Radius Generator to keep the shadow curve matched to the box.
Opacity and color choices
Black at 10 to 25 percent opacity suits light interfaces because it reads as a natural shadow rather than a gray box. Colored shadows, such as blue at 40 to 55 percent, create glows for focus states and primary buttons. Test the same shadow on both light and dark stage colors here before shipping, since a shadow tuned on white can disappear on gray. The breakdown card shows the exact rgba() value so the color renders identically everywhere.
Inset shadows and layering
Inset shadows draw inside the border edge and suggest pressed or recessed surfaces, for example active buttons and input wells. CSS allows comma-separated shadow layers, so designers often stack a tight dark shadow with a wide faint one for realistic depth. This generator outputs one layer at a time to keep the code readable; combine two copied lines with a comma in your stylesheet for stacked effects, and style the button itself with the CSS Button Generator.
Honest limitations
Very large blur values, above about 60px, can look washed out and cost extra paint time on low-end phones, so prefer moderate blur for lists with many cards. Box shadows do not follow the shape of transparent PNG content or clipped text, they follow the border box only. This tool outputs a single shadow layer and normal outset or inset positioning; it does not generate text-shadow or drop-shadow() filter functions.
Privacy and Client-Side Security
Privacy Guarantee: All generation occurs locally inside your browser. Your slider values and colors are never transmitted, stored, or recorded on remote servers.
Many online editors save drafts or track style choices on a server, which is unnecessary for fixed-syntax CSS math. TinyToolzz keeps everything in-page: hex parsing, RGBA conversion, and string building run with plain JavaScript number operations.
Because nothing is uploaded, there is no waiting, no account, and no copy of your design retained anywhere. Your values exist only in the tab's memory and are discarded when you close the page or click Reset.