CSS Box Shadow Generator
Build CSS box shadows visually with sliders for X offset, Y offset, blur, spread and opacity. Stack multiple shadow layers, pick from Material Design and Tailwind elevation presets, preview on different element shapes, and copy the CSS in one click.
CSS Box Shadow Generator Tool
Multi-layer shadows and elevation presets — features most CSS tools skip
Most box shadow generators let you control one shadow. This tool stacks unlimited layers, each with independent controls. Add Material Design elevation or Tailwind preset shadows as a starting point, then customise per layer — something no other free tool offers together.
How to build a CSS box shadow
How this compares to other CSS shadow generators
| Feature | LazyTools | CSS Scan | CSSmatic | Shadow Brumm |
|---|---|---|---|---|
| Visual slider controls | Yes | Yes | Yes | Yes |
| Multiple shadow layers | Yes — unlimited | No | No | Yes |
| Material Design presets | Yes — dp2/8/16 | No | No | No |
| Tailwind shadow presets | Yes — sm/md/lg/xl | No | No | No |
| Copy as CSS variable | Yes | No | No | No |
| Inset shadow per-layer | Yes | No | Yes | Yes |
| Multiple preview shapes | Yes — 3 shapes | One only | One only | One only |
| Dark background preview | Yes | No | No | No |
CSS box-shadow property values explained
| Value | Syntax example | What it controls |
|---|---|---|
| X offset | 4px | Horizontal offset. Positive = right, negative = left |
| Y offset | 4px | Vertical offset. Positive = down, negative = up |
| Blur radius | 10px | Softness. 0 = hard edge, higher = softer/larger shadow |
| Spread radius | 0px | Expands or contracts shadow. Negative shrinks it |
| Color | rgba(0,0,0,.2) | Shadow colour and transparency |
| inset | inset | Makes shadow appear inside the element |
| Multiple shadows | s1, s2, s3 | Comma-separated list, applied back to front |
| none | none | Removes all shadows from the element |
CSS Box Shadow — A Complete Guide for Designers and Developers
The CSS box-shadow property is one of the most powerful and most misused tools in web design. Used well, shadows create a sense of depth and hierarchy — making interactive elements feel tactile and giving content a sense of elevation off the page. Used poorly, they look dated, heavy or artificial. Understanding the six values that control a box shadow — and how to combine multiple shadows for realistic depth — separates professional-looking UIs from amateur ones.
The anatomy of a CSS box shadow
A CSS box shadow takes up to six values: horizontal offset, vertical offset, blur radius, spread radius, colour, and the optional inset keyword. The horizontal and vertical offsets position the shadow relative to the element — positive X casts the shadow to the right; positive Y casts it downward. The blur radius determines how soft or hard the shadow edge is: 0 creates a sharp solid shadow, while higher values create a progressively softer, more diffuse effect. The spread radius expands or contracts the shadow in all directions — a positive spread makes the shadow larger than the element; a negative spread shrinks it.
Why shadows should use rgba() not hex colours
Most beginner implementations use a hex grey like #aaaaaa for shadows. The problem is that hex grey shadows look artificial on coloured or dark backgrounds — a grey shadow on a dark surface produces a muddy effect that does not occur in nature. Professional shadows use a dark base colour (usually black or very dark navy) at low opacity using rgba(). A shadow of rgba(0,0,0,0.15) blends naturally with any background colour it falls on, because the transparency allows the background to influence the shadow tone. This is how Material Design, Apple Human Interface and Tailwind all specify their shadows.
Multi-layer shadows — how professionals create realistic depth
Real-world objects cast two kinds of shadow simultaneously: an ambient shadow — large, soft and diffuse, created by indirect environmental light from all directions — and a direct shadow — small, tighter and more opaque, created by the primary light source. A single CSS shadow can only approximate one of these. Professional elevation systems like Material Design dp8 use two comma-separated shadows: a tight, low-opacity layer at the same offset as the element's tilt, and a larger, more diffuse layer representing ambient light. The visual result is dramatically more natural than any single-layer shadow.
The Material Design elevation system
Material Design defines elevation in density-independent pixels (dp), from dp0 (no shadow) to dp24 (maximum elevation like modal dialogs). Each dp level specifies two shadow layers with precisely calibrated offsets, blur and opacity values. dp1 is used for cards and chips at rest. dp2 is for raised buttons. dp8 is for bottom navigation bars, menus and drawers. dp16 is for navigation drawers when open. dp24 is reserved for dialogs. Implementing these correctly — using two layers with the exact right values — produces the sense of physical depth that defines Material Design's visual language.
Tailwind CSS shadow utilities
Tailwind's shadow utilities — shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl and shadow-2xl — are single-layer shadows with increasing blur and spread. They differ from Material Design in being single-layer (simpler) and in using a combination of transparent black and a coloured shadow (Tailwind adds a second shadow in shadow-md and above using the --tw-shadow-colored property). When using Tailwind, you can customise the shadow colour using shadow-{color} utilities. The generator's Tailwind presets show the exact values behind each utility class.
Inset shadows — inner depth and pressed states
Adding the inset keyword reverses the shadow direction — instead of projecting outside the element, the shadow appears inside it. Inset shadows are used for pressed button states (the button appears to indent when clicked), text input fields (to create a recessed appearance), and neumorphic design patterns where elements appear to be embedded in the surface rather than raised above it. A classic technique is combining an outer shadow (element at rest, elevated) with an inset shadow on the same element's active state (pressed, recessed). Multi-layer support in this generator makes it straightforward to build both states.