box-shadow: 0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;The CSS Box Shadow Generator is a visual editor for the CSS box-shadow property. You adjust offset, blur radius, spread radius, color, and opacity with sliders and see the result render live on a preview element, then copy the exact CSS. Instead of guessing pixel values and reloading the page, you shape the shadow directly and read the code it produces.
The box-shadow property is deceptively deep. A single declaration can stack several shadows, each with its own offsets, blur, spread, color, and an optional inset keyword that paints the shadow inside the element rather than outside. Real interface shadows almost always use two or more layers to look natural, which is tedious to hand-write. This tool manages the layers for you and outputs a spec-valid declaration in the correct comma-separated order.
Everything happens in your browser. Pick a preset, tune the layers, switch the preview between light and dark backgrounds, and copy either the standard property or a block that also includes the -webkit- prefix. No account, no uploads, and it keeps working offline once the page has loaded.
Pick a preset like Card, Elevated, or Neumorphic to get a realistic starting point, or begin with a single default shadow layer and build up from there.
Drag the horizontal and vertical offset, blur radius, and spread radius sliders, set the shadow color and opacity, and toggle inset to move the shadow inside the box.
Add extra shadow layers for depth — a soft wide shadow under a tighter darker one reads as natural elevation. Reorder or remove layers as you refine the look.
Copy the box-shadow declaration, or the prefixed block for older browsers, and paste it straight into your stylesheet or component styles.
Stack any number of shadow layers into one declaration, in the correct top-to-bottom paint order, which is how real card and modal elevation is built
Sliders for horizontal and vertical offset, blur radius, and spread radius, plus a color picker, an opacity control, and an inset toggle cover every part of the grammar
A preview element updates instantly as you edit, and you can switch its background between light and dark to check how the shadow reads in both themes
Curated recipes for subtle, card, elevated, floating, inner, glow, neumorphic, and sharp shadows give you a proven starting point instead of a blank canvas
Create beautiful CSS gradients with live preview
Pick colors and convert between HEX, RGB, and HSL formats
Check the contrast ratio between a text color and its background against WCAG 2.2 AA and AAA thresholds, with a live preview and one-click accessible-color suggestions.
0 comments
No comments yet. Be the first to share your thoughts!