CSS Box Shadow Generator
Generate CSS box-shadow visually. Adjust offset, blur, spread, colour, and copy the code.
Drag sliders to build a CSS box-shadow and copy the generated code. Supports inset shadows and custom colour. Copy the result directly into your stylesheet.
Use small vertical offsets, soft blur, and low-opacity colours for card shadows. Use inset only when you want the shadow inside the element.
CSS Code
box-shadow: 5px 5px 15px 0px #00000040;
CSS Box Shadows: Adding Depth to Flat Design
Box shadows create the illusion of depth on a flat screen. They make cards feel like they're floating, buttons look pressable, and modals appear to sit above the page. Without shadows, everything feels flat and disconnected, with too many, everything looks like a 2012 skeuomorphic app.
The box-shadow property takes up to six values: horizontal offset, vertical offset, blur radius, spread radius, colour, and an optional "inset" keyword. The trick is using subtle, realistic shadows, most well-designed sites use shadows so subtle you don't consciously notice them.
This generator lets you adjust all shadow parameters visually and see the result in real time. Tweak the values, pick a colour, toggle inset if needed, and copy the CSS into your stylesheet.
Box Shadow Property Explained
| Value | What It Does | Typical Range |
|---|---|---|
| X offset | Horizontal position of the shadow | 0 to 20px (right), -20 to 0px (left) |
| Y offset | Vertical position of the shadow | 2 to 30px (below, most common) |
| Blur radius | How soft/blurry the edge is | 4 to 40px (larger = softer) |
| Spread radius | How much the shadow expands/shrinks | -5 to 10px (often 0 or negative) |
| Colour | Shadow colour (usually translucent black) | rgba(0,0,0,0.05 to 0.25) |
| Inset | Places shadow inside the element | Used for input focus and pressed states |
What this means for you: For most card-style shadows, you want: small Y offset (2-8px), moderate blur (8-24px), zero spread, and very low opacity (0.05-0.15). The shadow should be barely visible, that's what makes it look realistic.
Shadow Design Patterns
Layered shadows (most realistic)
Use 2-3 shadows of different sizes for realism. A tight, dark shadow near the element and a large, soft one further out mimics real-world lighting. Google's Material Design uses this approach.
Hover elevation
Increase shadow spread and blur on hover to create a "lifting" effect. Transition the box-shadow property for smooth animation. This works well on cards and buttons.
Coloured shadows
Instead of black, use a darker shade of the element's background colour for its shadow. A blue card with a dark blue shadow looks more cohesive than one with a grey shadow. Glassmorphism popularised this technique.
Inset shadows
Inset shadows make elements look recessed or pressed in. Perfect for active button states, text input fields, and neumorphism effects. Combine with a subtle outer shadow for the classic "pressed button" look.
Shadow Presets to Copy
These are production-ready shadows used by popular design systems. Copy the one that fits your use case:
| Name | CSS | Use Case |
|---|---|---|
| Subtle | 0 1px 3px rgba(0,0,0,0.08) | Cards, list items |
| Medium | 0 4px 12px rgba(0,0,0,0.1) | Dropdowns, popovers |
| Elevated | 0 8px 30px rgba(0,0,0,0.12) | Modals, floating panels |
| Layered (realistic) | 0 1px 2px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.07) | Card elevation with depth |
| Coloured glow | 0 4px 20px rgba(59,130,246,0.3) | Focus states, CTAs |
| Inset | inset 0 2px 4px rgba(0,0,0,0.1) | Input fields, pressed buttons |
Copyable Worked Example
A realistic card shadow often uses two layers: a small contact shadow close to the element and a larger ambient shadow further away. The first layer anchors the card, while the second layer softens the lift.
.product-card {
background: #ffffff;
border-radius: 12px;
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.08),
0 10px 24px rgba(15, 23, 42, 0.12);
}Layer 1
0 1px 2px gives a tight shadow under the card. It reads as contact with the surface.
Layer 2
0 10px 24px adds the softer ambient area. The larger blur keeps it from looking like a hard outline.
Colour
rgba(15, 23, 42, 0.12) uses a dark slate colour at low opacity, which is calmer than solid black.
Browser Support and CSS Details
The unprefixed box-shadow property is supported in all current browsers and has been safe for ordinary production use for many years. It applies to block boxes, inline blocks, flex items, grid items, buttons, inputs, and most other elements that render a box.
Box shadows do not affect layout. They are painted around the element after layout has already happened, so a large shadow will not push neighbouring content away. If a parent uses overflow: hidden, the shadow can be clipped at the parent edge.
Rounded corners are respected by box shadows. If an element has border-radius, the outer shadow follows that rounded outline instead of drawing a square corner.
| Feature | Support note | Practical guidance |
|---|---|---|
| Multiple shadows | Supported with comma-separated values | Place the smallest shadow first or last based on the visual stack you need |
| Inset shadows | Use the inset keyword | Good for pressed buttons and recessed inputs |
| Alpha colours | Use rgba(), hsla(), or 8-digit hex | Keep opacity low for UI shadows, often below 0.2 |
| Transparent elements | Shadow follows the element box, not transparent pixels | Use filter: drop-shadow() for cut-out PNGs or SVG shapes |
Box Shadow vs Drop Shadow
Use box-shadow for UI boxes
box-shadow uses the element's rectangular border box. It respects border-radius, can be inset, can have a spread radius, and is the right choice for cards, panels, buttons, menus, and dialogs.
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);Use drop-shadow for alpha shapes
filter: drop-shadow() follows visible pixels in an image or SVG. It is useful for icons and transparent PNGs, but it does not support spread radius and cannot create an inset shadow.
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.18));Common Box Shadow Mistakes
Using opaque black
#000 usually looks heavy. Use a transparent colour such as rgba(0, 0, 0, 0.12) or a tinted neutral.
Confusing blur and spread
Blur softens the edge. Spread grows or shrinks the shadow before blur is applied. Negative spread can keep a large blur from making the card look too wide.
Letting parents clip the shadow
A shadow inside an overflow: hidden wrapper may disappear at the edges. Add padding to the wrapper or move the shadow to an outer element.
Animating large shadows
Large blur changes can cause repaints. For hover states, keep the values close, transition opacity on a pseudo-element, or combine a small shadow change with a transform.
Using shadow as the only focus style
Keyboard focus needs a clear visible indicator. A soft glow can help, but pair it with enough contrast to meet the user's visual needs.
Adding too many layers
Two or three layers are usually enough. Long comma chains are harder to maintain and can make the interface feel noisy.
Related Tools
How to use this tool
Adjust the X/Y offset, blur, and spread sliders
Pick a shadow colour and toggle inset if needed
Copy the generated CSS code to your stylesheet
Common uses
- Adding depth to card and panel components
- Creating hover elevation effects on buttons
- Designing neumorphism and glassmorphism UIs
- Styling modal and dropdown overlays
- Building focus rings and soft glows with transparent colours
Share this tool
Frequently Asked Questions
What is box-shadow in CSS?
Can I add multiple shadows?
What does the inset keyword do?
What shadow values look most realistic?
Does box-shadow affect layout?
Can I animate box-shadow?
What's the difference between box-shadow and drop-shadow?
How do I create a coloured shadow?
What's the performance impact of box-shadow?
Is my shadow CSS sent to a server?
What shadow colours work in dark mode?
How do I remove a box-shadow?
Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.