There is a visible difference between a web page that was built and a web page that was designed. Often, the single element that separates the two is shadow. A flat card with a border looks functional. The same card with a subtle, layered shadow looks intentional. It floats. It has depth. It occupies space in a way that flat elements do not.
Shadows are not decoration. They are information. They tell the user what is important, what is interactive, and what sits above what. The problem is that writing good box-shadow CSS by hand is tedious, especially when you need multiple layers to achieve a realistic, dimensional effect.
That is why we built the CSS Box Shadow Generator. It is a free, browser-based tool for creating single and multi-layer box shadows with interactive controls. Adjust offset, blur, spread, and color in real time. Stack multiple layers to create realistic depth. Copy the CSS and paste it into your stylesheet. No signup. No server. No data leaves your browser.
Why Box Shadows Matter in Modern UI
Shadows do more than make things pretty. They solve real interface problems.
Depth and Hierarchy
The human visual system uses light and shadow to understand three-dimensional space. When an element casts a shadow, the brain interprets it as elevated above the surface. This is why Material Design uses elevation as a core organizing principle: the higher the elevation, the larger and softer the shadow, and the more important the element.
In practice, this means you can create visual hierarchy without changing colors, sizes, or typography. A modal with a large diffuse shadow reads as "above everything else" before the user reads a single word. A card with a small tight shadow reads as "slightly raised." A flat element reads as "on the surface." Three states, one property.
Focus and Attention
Shadows guide the eye. A button with a colored glow shadow draws attention without screaming. An input field with an inset shadow on focus tells the user "you are here" without changing the border color. A notification toast that slides in with a dramatic shadow announces itself as temporary and important.
The best shadows are felt before they are seen. The user notices the effect — "this is important" — without consciously registering the shadow that created it.
Material Design and Elevation Systems
Google's Material Design formalized the relationship between elevation and shadow. In Material, every surface has a z-height measured in density-independent pixels (dp). A button rests at 2dp. A card at 1dp. A modal at 24dp. Each elevation maps to a specific shadow: higher surfaces get larger, softer, more diffuse shadows.
The key insight is that real shadows are not single values. A surface at 24dp does not cast one shadow. It casts an ambient shadow (soft, large, low opacity) and a directional shadow (tighter, darker, offset). The combination creates realism. Our generator lets you build these multi-layer shadows explicitly, giving you the same dimensional language that Material Design uses.
Neumorphism and Soft UI
Neumorphism (soft UI) is a design trend that uses shadows to create the illusion of extruded plastic surfaces. Instead of sharp borders, elements are defined by highlights on one side and shadows on the other. The effect is subtle, soft, and tactile.
The trick to neumorphism is matching the shadow color to the background. A light gray button on a light gray background needs a dark shadow on the bottom-right and a light shadow (highlight) on the top-left. Both shadows must be very soft and low-contrast. Get it wrong and the element looks muddy. Get it right and it looks like you could press it with a finger.
Our generator includes a neumorphism preset that handles the color matching and layer stacking for you. Select it, adjust the base color, and copy the CSS.
The Difference Between Built and Designed
A developer can build a functional interface with borders, padding, and flat colors. It will work. But it will not feel designed until the shadows are right. Shadows are what turn a grid of boxes into a spatial environment. They are what make a button feel pressable, a card feel tappable, and a modal feel urgent.
The good news: you do not need to be a designer to use shadows well. You need a tool that lets you experiment visually and copy the result.
The Anatomy of CSS box-shadow
The box-shadow property in CSS accepts a comma-separated list of shadow layers. Each layer has up to six values:
box-shadow: x-offset y-offset blur-radius spread-radius color inset;Here is what each parameter does, with practical guidance on how to use it.
x-offset (Horizontal Shift)
Positive values shift the shadow to the right. Negative values shift it to the left. A value of 0 centers the shadow directly behind the element.
Most UI shadows use a small positive x-offset (1px to 4px) to simulate a light source from above and slightly to the left. This is the default assumption in most design systems. If you are building a dark-themed interface, you might use a negative x-offset or keep it at 0 for a centered ambient shadow.
y-offset (Vertical Shift)
Positive values shift the shadow downward. Negative values shift it upward. This is the parameter that creates the most visible sense of elevation.
A y-offset of 1px to 2px creates a subtle "lifted" effect. A y-offset of 8px to 16px creates dramatic elevation for modals, dropdowns, and floating action buttons. The y-offset is usually larger than the x-offset because gravity pulls shadows down.
blur-radius (Softness)
The blur-radius controls how soft the shadow edges are. A value of 0 creates a sharp, hard-edged shadow. Higher values create progressively softer edges.
Blur-radius is where most hand-written shadows go wrong. Developers often use values that are too small, creating harsh edges that look artificial. Real shadows are soft. A good rule of thumb: the blur-radius should be at least equal to the offset, and often 2x to 4x larger. A shadow with 4px offset and 16px blur looks natural. A shadow with 4px offset and 4px blur looks like a border.
spread-radius (Expansion and Contraction)
The spread-radius expands or contracts the shadow before the blur is applied. Positive values make the shadow larger. Negative values make it smaller.
Spread-radius is the least understood parameter, but it is essential for realistic multi-layer shadows. The ambient shadow in a Material Design elevation uses a large spread-radius to create a diffuse base. The directional shadow uses a small or zero spread-radius to create a tight, focused shadow. Without spread, you cannot separate these two effects.
color (with Opacity via rgba)
The shadow color. Most design systems use black with low opacity for shadows: rgba(0, 0, 0, 0.1) for subtle shadows, rgba(0, 0, 0, 0.2) for moderate shadows, and rgba(0, 0, 0, 0.3) for dramatic shadows.
Opacity matters more than hue. A black shadow at 5% opacity can be more effective than a dark gray shadow at 50% opacity because it blends naturally with the background. Colored shadows (glows) use the same parameter but with a saturated hue at moderate opacity: rgba(59, 130, 246, 0.5) for a blue glow.
inset (Inner Shadow)
The inset keyword flips the shadow direction. Instead of casting a shadow outside the element, it creates a shadow inside the element's border. Inset shadows are essential for pressed button states, input field wells, and carved text effects.
An inset shadow with a positive offset creates a shadow on the inside edge opposite the offset direction. An inset shadow with negative offset and negative spread can create a subtle inner glow by contracting the shadow area and blurring the edge.
Multi-Layer Shadows: Why Stacking Matters
Real-world shadows are not single values. A coffee cup on a table casts a tight, dark shadow directly beneath it (the contact shadow) and a larger, softer shadow that fades across the table (the ambient shadow). These two shadows have different offsets, blurs, and opacities. CSS lets you replicate this by stacking multiple shadow layers, separated by commas.
box-shadow:
0 1px 2px rgba(0,0,0,0.1),
0 4px 8px rgba(0,0,0,0.1),
0 16px 32px rgba(0,0,0,0.05);In this example, the first layer is a tight contact shadow. The second layer is a medium directional shadow. The third layer is a large, diffuse ambient shadow. Together they create a sense of realistic elevation that no single shadow can achieve.
Layer Stacking Order
Shadow layers stack in the order they are declared. The first layer in the list is on top. The last layer is on the bottom. This matters when shadows overlap: a tight dark shadow declared first will sit on top of a large soft shadow declared second.
The general pattern for realistic elevation is:
- Contact shadow: Small offset, small blur, higher opacity. Creates the "touching the surface" feeling.
- Directional shadow: Medium offset, medium blur, moderate opacity. Creates the primary sense of light direction.
- Ambient shadow: Large offset, large blur, low opacity. Creates the diffuse glow that grounds the element.
Material Design Elevation Example
A Material Design card at 8dp elevation uses two shadow layers:
box-shadow:
0 4px 6px rgba(0,0,0,0.1),
0 10px 20px rgba(0,0,0,0.1);A modal at 24dp uses three layers:
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1),
0 24px 48px rgba(0,0,0,0.15);Notice how the blur-radius grows faster than the offset. This is the key to realistic shadows: the higher the elevation, the softer and more diffuse the shadow becomes.
How to Use the Box Shadow Generator
Step 1: Start with a Preset or Blank Canvas
The fastest way to get started is to select one of the built-in presets. The generator includes presets for Material Design elevations, neumorphism, glow effects, 3D depth, and inner shadows. Click a preset to load it into the preview. All values are editable, so you can use a preset as a starting point and customize from there.
If you prefer to start from scratch, select the Blank preset. This gives you a single shadow layer with default values that you can adjust.
Step 2: Adjust Offset, Blur, and Spread
Use the sliders or numeric inputs to adjust each parameter. The preview updates in real time as you drag. Watch how the shadow changes:
- Increase y-offset to make the element feel higher above the surface.
- Increase blur-radius to soften the shadow edges. Too little blur looks artificial. Too much blur makes the shadow disappear.
- Adjust spread-radius to expand or contract the shadow area. Positive spread makes the shadow larger and more prominent. Negative spread makes it tighter.
Step 3: Pick Color and Opacity
Click the color swatch to open the color picker. Choose a hue and adjust the opacity slider. For standard shadows, stick with black at low opacity. For glow effects, choose a saturated color at moderate opacity. The preview background is dark, so you can see how the shadow behaves on both light and dark surfaces.
Step 4: Add More Layers for Depth
Click the Add Layer button to stack additional shadows. Each layer has its own set of controls. Use the layer list to reorder layers by dragging. Remember: first layer is on top, last layer is on the bottom.
For realistic elevation, try this three-layer structure:
- Contact: 0px 1px 2px, rgba(0,0,0,0.1)
- Directional: 0px 4px 8px, rgba(0,0,0,0.1)
- Ambient: 0px 16px 32px, rgba(0,0,0,0.05)
Step 5: Customize the Preview Element
The preview area shows your shadow applied to a sample element. You can change the element's background color, border radius, width, and height to match your actual use case. This helps you see how the shadow will look on your specific design.
Step 6: Copy CSS and Paste Into Your Stylesheet
The CSS output panel shows the complete box-shadow declaration. Click Copy CSS to copy it to your clipboard. Paste it into your stylesheet. The generator outputs clean, standards-compliant CSS with no vendor prefixes needed (box-shadow has been universally supported since IE9).
Preset Deep Dives
Material Design Shadows
Material Design defines shadows for 24 elevation levels, from 0dp (flat) to 24dp (modal). Most interfaces only need 1dp (cards), 2dp (buttons), 4dp (app bars), 8dp (menus), 16dp (dialogs), and 24dp (modals).
The generator includes presets for the most common elevations. Here is the CSS for a few:
1dp — Card Resting State:
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);4dp — App Bar:
box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1);8dp — Menu / Dropdown:
box-shadow: 0 8px 16px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1);16dp — Dialog:
box-shadow: 0 16px 32px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.1);24dp — Modal:
box-shadow: 0 24px 48px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1);When to use: Material Design shadows are the safest default for most web applications. They are tested, familiar, and communicate elevation clearly. Use 1dp for cards, 2dp for interactive elements, and 8dp+ for overlays.
Neumorphism
Neumorphism creates soft, extruded surfaces using two opposing shadows: a highlight on the top-left and a shadow on the bottom-right. Both shadows must match the background color family.
Soft Raised Button (light gray background #e0e5ec):
box-shadow:
9px 9px 16px rgba(163,177,198,0.6),
-9px -9px 16px rgba(255,255,255,0.5);Pressed State (inset):
box-shadow:
inset 6px 6px 10px rgba(163,177,198,0.7),
inset -6px -6px 10px rgba(255,255,255,0.8);When to use: Neumorphism works best for tactile interfaces — music players, smart home controls, and anywhere you want a physical, pressable feel. It requires a solid-color background to work. Do not use neumorphism on photographic or gradient backgrounds.
Glow Effects
Colored shadows create glow effects that draw attention and add energy. Unlike black shadows, glows use saturated colors at moderate opacity.
Blue Button Glow:
box-shadow:
0 0 20px rgba(59,130,246,0.5),
0 0 40px rgba(59,130,246,0.3);Success Badge Green Glow:
box-shadow: 0 0 12px rgba(34,197,94,0.6);Error State Red Glow:
box-shadow: 0 0 16px rgba(239,68,68,0.5);When to use: Glow effects are perfect for primary call-to-action buttons, status indicators, and notification badges. They signal importance without changing the element's size or position. Use sparingly — too many glows create visual noise.
3D Depth
Dramatic multi-layer shadows create deep, theatrical depth for hero cards, feature highlights, and landing page focal points.
Hero Card Depth:
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1),
0 24px 48px rgba(0,0,0,0.15),
0 48px 96px rgba(0,0,0,0.1);Floating Element:
box-shadow:
0 20px 25px -5px rgba(0,0,0,0.1),
0 10px 10px -5px rgba(0,0,0,0.04);When to use: 3D depth shadows work best on dark backgrounds where the shadow has room to breathe. Use them for hero sections, pricing cards, and feature showcases. Avoid on dense dashboards where the depth competes with content.
Inner Shadows
Inset shadows create the illusion of recessed surfaces. They are essential for pressed states, input fields, and carved effects.
Input Field Well:
box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);Pressed Button State:
box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);Carved Text Effect (on dark background):
box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);When to use: Inner shadows are critical for form inputs, toggle switches in the "on" position, and any element that needs to look recessed or pressed. They provide tactile feedback that flat borders cannot match.
Common Use Cases
Card Elevations
Cards are the most common shadow use case. A card at rest needs a subtle shadow to separate it from the background. A card on hover needs a larger shadow to indicate interactivity. A card that is being dragged needs the largest shadow to indicate it is temporarily above everything else.
.card {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: box-shadow 0.2s ease;
}
.card:hover {
box-shadow: 0 8px 16px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1);
}Button States
Buttons need three shadow states: rest, hover, and active (pressed). The rest state has a subtle shadow. The hover state increases the shadow to suggest the button is rising toward the user. The active state uses an inset shadow to suggest the button is pressed down.
.btn {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.btn:active {
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}Modal Overlays and Backdrops
Modals need two things: a large shadow to indicate they are above everything else, and a backdrop shadow (or dimming overlay) to indicate the rest of the interface is temporarily inactive.
.modal {
box-shadow: 0 24px 48px rgba(0,0,0,0.2), 0 12px 24px rgba(0,0,0,0.15);
}
.backdrop {
background: rgba(0,0,0,0.5);
}Input Field Focus States
A focused input field should stand out without being jarring. A colored glow shadow around the input creates focus that is more elegant than a thick border.
input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59,130,246,0.3);
}This pattern uses a spread-radius of 0 with a large blur and no offset, creating a ring of color around the input. The outline: none removes the default browser focus ring, which is replaced by the custom shadow.
Notification Badges and Toasts
Notifications need to announce themselves without blocking content. A colored glow shadow plus a subtle elevation shadow creates the right balance of visibility and non-intrusiveness.
.toast {
box-shadow:
0 4px 6px rgba(0,0,0,0.1),
0 0 20px rgba(59,130,246,0.3);
}Design Notes: The Shadow Theater
The interface of the Box Shadow Generator is designed around the metaphor of a theatrical stage. The preview area is a dark velvet stage — deep black with a subtle radial gradient suggesting a spotlight from above. Your element sits center stage, lit by warm amber spotlights that cast shadows across the floor.
The control panel is arranged like a lighting board: sliders for intensity and position, color swatches for gels, and layer controls for stacking multiple lights. The preview updates in real time as you adjust the "lighting," giving you immediate feedback on how the shadows fall.
The color palette is restrained: warm amber for accents, cool gray for UI chrome, and deep black for the stage. Typography uses a geometric sans-serif for headings and a monospace font for code output, ensuring the CSS you copy is readable and precise.
The focus is always on the shadow. The UI stays out of your way.
Privacy: 100% Client-Side
Many online design tools upload your work to a server for processing or store your designs in the cloud. Our CSS Box Shadow Generator runs entirely in your browser. There is no server, no database, no analytics, and no data collection. You can save the page to your computer and use it offline. You can inspect every line of code. Your shadow designs never leave your machine.
Related Tools
After creating your shadows, you might also find these tools useful:
- CSS Gradient Generator — Create linear, radial, and conic gradients for backgrounds and buttons that pair beautifully with your shadows
- Color Palette Generator — Generate harmonious color schemes to find the perfect shadow and glow colors
- Color Converter — Convert between HEX, RGB, and HSL with real-time preview for precise shadow color values
- HTML Live Preview Editor — Paste your shadow CSS into a live HTML editor to see how it looks in a real layout
Start Creating Shadows
Open the CSS Box Shadow Generator, pick a preset, and start adjusting layers. Watch the preview update instantly. Copy the CSS and paste it into your stylesheet. No signup required.
Shadows are the difference between flat and dimensional. Between built and designed. Between functional and remarkable. Make your interface remarkable.