CSS Box Shadows: A Complete Guide With Examples
This guide has a free tool → Open Open ToolBox Box Shadow Generator
CSS Box Shadows: A Complete Guide With Examples
The CSS box-shadow property adds shadow effects around an element's frame. It is one of the most versatile properties in CSS - used for subtle depth cues, card elevation, glowing highlights, neumorphic interfaces, pressed-button states, and much more. Understanding it deeply will sharpen your eye for design and make your UI polish immediately visible.
This guide covers every aspect of the property: the full syntax, all major design patterns with working code, animation techniques, dark mode handling, performance considerations, and a reference of ready-to-use shadow values.
CSS Box Shadow Generator
Free online CSS box shadow generator - create beautiful CSS box shadows with a visual builder and live preview
Color Converter
Free online color converter - convert colors between HEX, RGB, HSL formats with live preview
Color Contrast Checker
Free online color contrast checker - check WCAG color contrast ratios for accessibility compliance
Understanding the box-shadow Syntax
Full Syntax
box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;The only required values are offset-x, offset-y, and color. Everything else is optional.
You can stack multiple shadows by separating them with commas:
box-shadow: shadow1, shadow2, shadow3;Parameter Breakdown
| Parameter | Required | Default | What It Does |
|---|---|---|---|
inset | No | outer | Makes the shadow appear inside the element instead of outside |
offset-x | Yes | - | Horizontal distance. Positive = right, negative = left |
offset-y | Yes | - | Vertical distance. Positive = down, negative = up |
blur-radius | No | 0 | How blurred the shadow edge is. 0 = sharp. Higher = softer |
spread-radius | No | 0 | Expands or contracts the shadow. Positive = larger, negative = smaller |
color | Yes* | currentColor | Shadow color. Use rgba() or hsla() for transparency |
*Color has an implicit default of currentColor in the spec, but browser behavior can be inconsistent. Always set it explicitly.
Basic Example
.card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}This creates a subtle downward shadow - the most common pattern for card-style UI elements. Breaking it down:
0- no horizontal offset4px- 4px below the element6px- moderate blurrgba(0, 0, 0, 0.1)- black at 10% opacity, very subtle
A Zero-Blur Shadow (Border Replacement)
.bordered {
box-shadow: 0 0 0 2px #3b82f6;
}Setting blur and offsets to zero with a positive spread creates a solid outline. This is commonly used as a focus ring because it does not affect layout (unlike outline or border), and you can animate it smoothly.
Common Shadow Patterns
Material Design Elevation Shadows
Google's Material Design system uses shadows to communicate elevation - how "high" an element floats above the surface. The technique uses two layered shadows: one broad and soft for ambient light, one shorter and sharper for the direct light source.
/* Elevation 1 - Cards, switches */
.elevation-1 {
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
/* Elevation 2 - Buttons, dropdowns */
.elevation-2 {
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.16),
0 3px 6px rgba(0, 0, 0, 0.23);
}
/* Elevation 3 - FABs, app bars */
.elevation-3 {
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
}
/* Elevation 4 - Drawers, modals */
.elevation-4 {
box-shadow:
0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);
}
/* Elevation 5 - Dialogs, pickers */
.elevation-5 {
box-shadow:
0 19px 38px rgba(0, 0, 0, 0.30),
0 15px 12px rgba(0, 0, 0, 0.22);
}The pattern: each elevation step increases the vertical offset and blur of both shadows. The ambient shadow (first) is always softer and more diffuse. The key shadow (second) is sharper and represents the main light source above.
Tailwind CSS Shadow Scale
Tailwind CSS ships with a well-designed shadow scale that maps to common use cases:
/* Tailwind's shadow values (what the utilities actually output) */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05); }
.shadow-none { box-shadow: 0 0 #0000; }Notice Tailwind uses a negative spread radius (-1px, -3px, -4px) on some shadows. This clips the shadow so it does not bleed out to the sides - giving a cleaner, more realistic shadow that appears to come from directly above rather than all directions.
Neumorphism (Soft UI)
Neumorphism became a popular design trend around 2020. The technique uses two shadows - one lighter, one darker - on a background that exactly matches the element's background color. This creates the illusion that the element is extruded from (or pressed into) the surface.
/* Extruded (raised) neumorphic card */
.neumorph-raised {
background: #e0e5ec;
border-radius: 16px;
box-shadow:
8px 8px 16px #b8bec7,
-8px -8px 16px #ffffff;
}
/* Pressed (inset) neumorphic button */
.neumorph-pressed {
background: #e0e5ec;
border-radius: 16px;
box-shadow:
inset 8px 8px 16px #b8bec7,
inset -8px -8px 16px #ffffff;
}
/* Flat neumorphic style (subtle) */
.neumorph-flat {
background: #e0e5ec;
border-radius: 12px;
box-shadow:
4px 4px 8px #b8bec7,
-4px -4px 8px #ffffff;
}The critical rule: the background color of the element must exactly match the background color it sits on. If the element background and page background differ, the effect breaks completely.
To derive the two shadow colors from a background hex value, lighten it for the light shadow and darken it for the dark shadow, while keeping roughly the same hue and saturation.
Glowing Borders and Highlights
Use spread radius and small or zero offsets to create a uniform glow around the element. This is popular for interactive elements, game UI, and cyberpunk-style interfaces.
/* Basic glow */
.glow-blue {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}
/* Layered glow - more natural falloff */
.glow-layered {
box-shadow:
0 0 5px rgba(59, 130, 246, 0.4),
0 0 15px rgba(59, 130, 246, 0.3),
0 0 30px rgba(59, 130, 246, 0.2),
0 0 60px rgba(59, 130, 246, 0.1);
}
/* Green success glow */
.glow-success {
box-shadow:
0 0 8px rgba(16, 185, 129, 0.4),
0 0 25px rgba(16, 185, 129, 0.2);
}
/* Red error / danger glow */
.glow-danger {
box-shadow:
0 0 8px rgba(239, 68, 68, 0.5),
0 0 20px rgba(239, 68, 68, 0.2);
}
/* Neon style - very intense */
.neon-purple {
color: #c084fc;
box-shadow:
0 0 5px #c084fc,
0 0 10px #c084fc,
0 0 20px #c084fc,
0 0 40px #9333ea,
0 0 80px #9333ea;
}Layered glows with decreasing opacity look much more natural than a single shadow. Multiple layers simulate the way real light scatters through air.
Inset Shadows
The inset keyword moves the shadow to the inside of the element. This is used for:
- Pressed button states (depth feedback)
- Input fields with a "sunken" appearance
- Image frames that look physically recessed
/* Basic inset - makes inputs look "dug in" */
.input-field {
background: #f3f4f6;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}
/* Deeply pressed button */
.button-pressed {
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Top-edge inset only - common for tab active states */
.tab-active {
box-shadow: inset 0 3px 0 #3b82f6;
}
/* All-around inset for image frames */
.image-frame {
box-shadow:
inset 0 0 0 4px rgba(255, 255, 255, 0.8),
inset 0 0 0 6px rgba(0, 0, 0, 0.1);
}
/* Combining inset and outer shadows */
.well {
box-shadow:
inset 0 2px 6px rgba(0, 0, 0, 0.2),
0 1px 0 rgba(255, 255, 255, 0.8);
}Focus Rings With box-shadow
The outline CSS property is the traditional choice for focus indicators, but box-shadow is often preferred because it:
- Respects
border-radius(outline does not in older browsers) - Can be animated smoothly
- Can combine multiple colors (useful for high-contrast accessibility)
/* Standard focus ring */
.button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}
/* Two-tone focus ring - white gap + colored outline */
.button:focus-visible {
outline: none;
box-shadow:
0 0 0 2px #ffffff,
0 0 0 4px #3b82f6;
}
/* Dark background focus ring */
.dark-button:focus-visible {
outline: none;
box-shadow:
0 0 0 2px #1e293b,
0 0 0 4px #60a5fa;
}The two-tone focus ring (white gap + colored ring) is an accessibility best practice. It ensures the focus indicator is visible on both light and dark backgrounds.
Directional Shadows
Most UI shadows come from above, so they point downward. But directional shadows can be useful for specific design effects:
/* Standard: light from above, shadow below */
.shadow-down {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
/* Light from below - use sparingly, feels unnatural */
.shadow-up {
box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.15);
}
/* Light from left */
.shadow-right {
box-shadow: 8px 0 16px rgba(0, 0, 0, 0.15);
}
/* Dropdown shadow - strong below, clipped on sides */
.dropdown {
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Sidebar shadow - shadow only on the right edge */
.sidebar {
box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
}
/* Sticky header - shadow only below */
.sticky-header {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}Text-Style Shadows for Box Borders
By using box-shadow with zero blur and only spread, you can create solid outlines without affecting layout - useful for stacking multiple border colors:
/* Multi-layer border effect */
.multi-border {
box-shadow:
0 0 0 4px #3b82f6, /* Blue inner border */
0 0 0 8px #bfdbfe, /* Light blue gap */
0 0 0 10px #1d4ed8; /* Dark blue outer border */
}
/* Animated border that appears on hover */
.animated-border {
box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
transition: box-shadow 0.3s ease;
}
.animated-border:hover {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}Interactive Shadow Patterns
Hover Elevation Effect
A card that lifts when hovered is a common interaction pattern that provides clear feedback:
.card {
background: white;
border-radius: 8px;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
transform: translateY(0);
transition:
box-shadow 0.3s ease,
transform 0.3s ease;
}
.card:hover {
box-shadow:
0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);
transform: translateY(-4px);
}Combining transform: translateY(-4px) with an increased shadow creates a convincing floating effect. The element visually moves up while the shadow grows to match the increased apparent distance from the surface.
Press Effect (Button Click Feedback)
.button {
background: #3b82f6;
color: white;
padding: 10px 20px;
border-radius: 6px;
border: none;
cursor: pointer;
box-shadow:
0 4px 6px rgba(59, 130, 246, 0.4),
0 1px 3px rgba(0, 0, 0, 0.1);
transform: translateY(0);
transition:
box-shadow 0.15s ease,
transform 0.15s ease;
}
.button:hover {
box-shadow:
0 7px 14px rgba(59, 130, 246, 0.4),
0 3px 6px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.button:active {
box-shadow:
0 1px 3px rgba(59, 130, 246, 0.3),
0 1px 2px rgba(0, 0, 0, 0.1);
transform: translateY(1px);
}On :active, the shadow shrinks and the element moves slightly down, reinforcing the physical press sensation.
Scrolling Shadow Indicator
A shadow on a scrollable container that only appears when content is scrolled:
.scroll-container {
/* Shadow that appears at the bottom when scrolled */
background:
linear-gradient(white 30%, rgba(255,255,255,0)) center top,
linear-gradient(rgba(255,255,255,0), white 70%) center bottom,
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)) center top,
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) center bottom;
background-repeat: no-repeat;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
background-attachment: local, local, scroll, scroll;
}This pure-CSS technique uses a combination of local and scroll background attachments to show scroll indicators without JavaScript.
Performance Considerations
Why box-shadow Affects Performance
When the browser renders box-shadow, it computes a blur operation across a region of pixels. This happens on the CPU (or GPU via compositing), and for elements that are frequently repainted - during animations, scrolling, or resize - large shadows can cause visible frame drops.
Key factors that affect shadow performance:
- Blur radius: Larger blur = more pixels computed per frame
- Spread radius: Larger spread = larger area to blur
- Number of shadows: Each shadow stacked is computed separately
- Element count: Ten cards each with
box-shadow: 0 0 100pxis expensive
The Pseudo-Element Shadow Trick
Animating box-shadow directly forces the browser to repaint the shadow on every animation frame. A faster approach: put the shadow on a ::after pseudo-element and animate its opacity instead. Opacity changes are composited on the GPU without repaint.
.card {
position: relative;
border-radius: 8px;
background: white;
/* Resting shadow - cheap, always visible */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Pre-render the hover shadow but hide it */
.card::after {
content: '';
position: absolute;
inset: 0; /* Shorthand for top/right/bottom/left: 0 */
border-radius: inherit;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
opacity: 0;
transition: opacity 0.3s ease;
}
/* Fade the pre-rendered shadow in */
.card:hover::after {
opacity: 1;
}This is one of the most impactful CSS performance optimizations. The shadow is computed once at paint time; only the opacity changes during hover, which the GPU handles without involving the CPU's layout/paint pipeline.
will-change: box-shadow
For elements where you know shadow will animate, hint to the browser to promote the element to a compositor layer:
.animated-card {
will-change: box-shadow;
/* or: will-change: transform; if using the pseudo-element trick */
}Use will-change sparingly. Overusing it causes memory overhead because each will-change element gets its own GPU layer.
Keep Blur Under 40px for Scrolling Lists
For lists with many items (a feed, a table, a grid), keep blur-radius under 40px. Beyond that, the blur computation starts affecting scroll performance on mid-range mobile devices.
/* Fast - suitable for lists with 100+ items */
.list-item {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
/* Acceptable - use sparingly */
.featured-card {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
/* Expensive - reserve for single featured elements */
.hero-card {
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}Dark Mode Shadow Strategies
Shadows on dark backgrounds require a completely different approach than light-mode shadows. A dark background already absorbs light, so a semi-transparent black shadow is nearly invisible.
Option 1: Increase Shadow Opacity
The simplest fix is to increase the opacity of the shadow on dark backgrounds:
/* Light mode */
.card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* Dark mode - much higher opacity needed */
@media (prefers-color-scheme: dark) {
.card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
}Option 2: Light Shadows on Dark Backgrounds
On very dark surfaces, a subtle light shadow can create an "inner glow" effect that communicates elevation without darkness:
@media (prefers-color-scheme: dark) {
.card {
background: #1e293b;
/* Slightly lighter top edge to suggest light source */
box-shadow:
0 -1px 0 rgba(255, 255, 255, 0.05),
0 4px 12px rgba(0, 0, 0, 0.5);
}
}Option 3: CSS Custom Properties for Theming
The cleanest approach uses CSS custom properties so you define shadow values once and they switch with a class:
:root {
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] {
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6), 0 4px 6px rgba(0, 0, 0, 0.5);
}
.card {
box-shadow: var(--shadow-md);
}Option 4: Color-Aware Shadows
Instead of black shadows, use color-tinted shadows that match your brand:
/* Blue-tinted shadow - works on both light and dark */
.card {
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.3);
}
/* Purple-tinted shadow */
.feature-card {
box-shadow: 0 12px 40px rgba(88, 28, 135, 0.25);
}Color-tinted shadows look richer than pure black shadows in both light and dark modes, and they tie the shadow to your brand palette.
Animating box-shadow
Smooth Shadow Transition
The most straightforward animation: transition between two shadow values on hover.
.card {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}Use cubic-bezier(0.4, 0, 0.2, 1) (Material Design's standard easing) for shadows that feel natural and physical.
Pulsing Glow Animation
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 5px rgba(59, 130, 246, 0.4);
}
50% {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 40px rgba(59, 130, 246, 0.4);
}
}
.live-indicator {
animation: pulse-glow 2s ease-in-out infinite;
}Shadow on Scroll (JavaScript + CSS)
A header shadow that appears once the user scrolls:
.header {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
transition: box-shadow 0.3s ease;
}
.header.scrolled {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}const header = document.querySelector('.header');
window.addEventListener('scroll', () => {
if (window.scrollY > 10) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
}, { passive: true });The { passive: true } flag on the scroll listener tells the browser this listener will not call preventDefault(), allowing scroll to be handled on the compositor thread without waiting for JavaScript.
Ready-to-Use Shadow Reference
Here is a collection of production-ready shadow values organized by use case:
Minimal / Subtle
/* Barely-there - separates from background */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
/* Very light card */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
/* Clean border-like shadow */
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);Medium / Standard
/* Standard card */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
/* Dropdown menu */
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
/* Tooltip */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);Large / Dramatic
/* Modal / dialog */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
/* Full-page overlay card */
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Hero element */
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.2);Colored / Brand
/* Blue primary action */
box-shadow: 0 4px 14px rgba(59, 130, 246, 0.5);
/* Green success */
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
/* Red error / destructive */
box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
/* Purple accent */
box-shadow: 0 8px 30px rgba(139, 92, 246, 0.4);Inset / Pressed
/* Light inset */
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
/* Deep inset for wells and inputs */
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15);
/* Active button press */
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);Combining box-shadow With Other Properties
With border-radius
The shadow correctly follows border-radius - you do not need any extra CSS:
.pill {
border-radius: 9999px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.circle {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.15),
0 0 0 3px rgba(59, 130, 246, 0.3);
}With clip-path (Caveat)
clip-path and box-shadow do not work well together. The clip mask cuts off the shadow because the shadow is rendered as part of the element's paint layer:
/* This does NOT work - shadow is clipped */
.clipped-with-shadow {
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Gets clipped */
}
/* Workaround: use drop-shadow filter instead */
.clipped-with-shadow {
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}filter: drop-shadow() follows the visual shape of the element (after clipping), while box-shadow follows the box model boundary.
With transform
Shadows work correctly with transformed elements:
.card {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: scale(1.05) rotate(-1deg);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}The shadow renders relative to the transformed position, which is what you want.
Browser Support and Fallbacks
box-shadow has universal browser support - it works in every browser in common use, including IE9+. You do not need fallbacks for box-shadow itself.
However, very old browsers (IE8 and below) do not support box-shadow. If you need to support them:
/* IE8 fallback: add a border */
.card {
border: 1px solid #ddd; /* Fallback for IE8 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Modern browsers */
}The box-shadow declaration is simply ignored by browsers that do not understand it, so the fallback border shows instead.
Using the ToolBox Box Shadow Generator
Writing box-shadow values by hand involves a lot of trial and error - tweaking numbers, refreshing the browser, adjusting again. A visual generator removes that friction entirely.
Open ToolBox Box Shadow Generator and get live, interactive control over every shadow parameter:
- Drag sliders for offset-x, offset-y, blur, and spread
- Pick shadow color with a visual color picker
- Toggle inset on and off
- Add multiple shadow layers and see them stacked
- Copy the final CSS with one click
The generator also shows a live preview on a representative card element so you can immediately judge how the shadow looks in context.
Workflow: Design to Code
- Open the Box Shadow Generator
- Start with one of the presets (card, elevation, glow, neumorphic)
- Adjust parameters until it matches your design
- Copy the generated CSS
- Paste into your stylesheet
For the color values, combine the generator with the Color Converter to translate hex colors to rgba or hsla for transparency control. Use the Color Contrast Checker to verify that your shadow-styled elements still meet accessibility contrast requirements.
When building full card components with shadows, the CSS Grid Generator and CSS Flexbox Generator can handle the layout, while the Border Radius Generator handles the corner rounding - all part of your component toolkit alongside the shadow generator.
Open ToolBox Box Shadow Generator - visual, instant, free. No account required.
Related Tools
Free, private, no signup required
You might also like
Want higher limits, batch processing, and AI tools?