CSS Box Shadow Generator
Tune a shadow visually and copy the resulting CSS declaration. Your work stays on this device whenever possible.
How to use CSS Box Shadow Generator
- Pick a "Style & Elevation Presets" entry such as "Elevation Level 2 (Card Hover)" or "Neumorphism Soft UI (Inset / Debossed)", or begin with "Custom Layers...".
- Edit each layer row: X, Y, Blur, Spread, Color, Opacity and the "Inset" checkbox; a "Delete" button appears once there is more than one layer.
- Press "+ Add Shadow Layer" to stack extra layers, up to six.
- Drag the light joystick, or move the Angle (0 to 360) and Distance (0 to 60px) sliders, to set the light direction across all layers.
- Adjust "Stage Background" and "Border Radius" for the preview, choose the CSS, Tailwind or SCSS tab, and press "Copy Code".
Worked example
Select "Elevation Level 2 (Card Hover)". The CSS tab shows box-shadow: 0px 4px 6px -1px rgba(0,0,0,0.1), 0px 2px 4px -2px rgba(0,0,0,0.06); with two layers, and the caption under the preview box says 2 Layers. The SCSS tab prefixes the same value with $box-shadow-elevation, and the Tailwind tab swaps each space for an underscore.
When to use this tool
- Building a consistent set of card elevations for a design system.
- Producing a soft-UI inset shadow for a toggle control.
- Converting a shadow tweaked by eye into a Tailwind class before pasting it into markup.
Important limitations
Generates standard CSS box-shadow declarations. Complex multi-layer shadows with large blur and spread radiuses can impact GPU rendering on mobile browsers.
Comparing alternatives
Other options for css box shadow generator include CSSmatic, Brumm Shadow, Neumorphism.io, Box-Shadows.co.
ToolkitPoint is not affiliated with those services.
Frequently asked questions
Why did my typed X and Y values change?
Moving the angle or distance control recalculates the offsets of every layer, scaling each by its place in the stack so the first layer moves least. Set the light direction first, then fine-tune individual layers.
How is the Tailwind output written?
As a single arbitrary value with underscores in place of spaces, such as shadow-[0px_4px_6px_-1px_rgba(0,0,0,0.1),0px_2px_4px_-2px_rgba(0,0,0,0.06)]. It needs a Tailwind release that supports arbitrary values, and the colours are fixed rather than themeable.
What does a negative spread do?
It shrinks the shadow before blurring, so combined with a positive Y offset the shadow shows only beneath the box. That is why the elevation presets use values between -1px and -6px, while the neon preset uses a positive spread of 2 for a halo.
Does the preview match the copied code exactly?
Only the shadow is exported. Neumorphism presets force the box and stage to #e2e8f0, and the glassmorphism preset adds a blur and border to the preview that are not in the copied text, so add those styles yourself.
What limits apply to layers and colours?
Six layers at most, and blur cannot go below zero. Colours are chosen as hex with a separate opacity slider, then exported as rgba with an alpha between 0 and 1. Heavy stacks can slow scrolling on modest phones.