box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);shadow-[5px_5px_15px_0px_rgba(0,0,0,0.25)]Showing 8 of 94 related tools
Get up and running in 30 seconds
Use horizontal and vertical offset sliders to position the shadow relative to the element. Positive values move shadow right/down, negative values move left/up.
Blur radius controls softness (0 = sharp, higher = softer). Spread radius expands or contracts the shadow size before blur is applied. Combine for various depth effects.
Choose shadow color with the picker. Adjust opacity for subtle or dramatic effects. Black with 10-30% opacity creates realistic depth, colors create stylized effects.
Click copy to get production-ready box-shadow CSS. Add multiple shadows by clicking 'Add Layer' - useful for complex depth effects and neumorphism designs.
Understanding CSS box-shadow for developers
A CSS shadow designer is a visual tool that generates box-shadow and text-shadow CSS properties for creating depth, elevation, and visual hierarchy in web interfaces. Shadows simulate light and dimension on flat screens, making UI elements appear raised, pressed, or floating. Modern shadow design is essential for Material Design elevation, glassmorphism effects, and accessible focus states.
CSS shadows use the box-shadow property for element shadows and text-shadow for text effects. Box-shadow adds shadows to container elements (cards, buttons, modals) while text-shadow adds depth to typography. Both properties support multiple comma-separated shadows for complex layering effects.
box-shadow: horizontal vertical blur spread color;
Example: box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
Elevation Metaphor: Shadows create the illusion of depth. Higher elements (modals, dropdowns) have larger, softer shadows. Lower elements (buttons at rest) have small, sharper shadows. Material Design uses 24 elevation levels defined by shadow intensity.
Light Source Consistency: Shadows should assume a consistent light source across the interface, typically from above (positive vertical offset). Inconsistent shadow directions create visual confusion and break immersion.
Subtle is Better: Real-world shadows are rarely pure black. Use dark gray or colored shadows with low opacity (10-30% alpha). Overly dark or saturated shadows look artificial and reduce readability.
Layered Shadows: Combine multiple shadows for realistic depth. Material Design uses 2-3 layered shadows: a sharp shadow close to the element (ambient shadow) and a larger, softer shadow further away (penumbra). Layering creates more realistic light simulation.
Visual feedback for interaction states requires shadows. Buttons elevate on hover (larger shadow), press down on click (smaller shadow), and return to rest state. Shadows communicate interactivity without animation.
Card and component hierarchies use shadows to establish visual layers. Primary content cards have more pronounced shadows than secondary elements. Modals have the darkest shadows, sitting above all other content.
Focus states for accessibility require visible indicators. Custom shadow-based focus states (outline-style shadows) improve accessibility while matching design systems better than default browser outlines.
Neumorphism and glassmorphism design trends rely heavily on shadows. Neumorphism uses soft inset and outset shadows to create extruded/pressed effects. Glassmorphism combines backdrop blur with subtle shadows for frosted glass appearance.
Card Elevation: Cards at rest have subtle shadows (0 2px 4px). Hovered cards elevate with larger shadows (0 8px 16px). Clicked cards have minimal shadow (0 1px 2px) appearing pressed.
Dropdown Menus: Floating menus need prominent shadows to appear above page content. Typical: 0 10px 20px rgba(0,0,0,0.15).
Modal Overlays: Modals use large, soft shadows to establish highest elevation: 0 20px 60px rgba(0,0,0,0.3).
Button States: Rest (0 2px 4px), hover (0 4px 8px), active/pressed (0 1px 2px), focus (0 0 0 3px rgba(color, 0.5) outline-style).
Text Depth: text-shadow adds depth to headings: 2px 2px 4px rgba(0,0,0,0.3). Use sparingly - shadows reduce text readability.
Box-shadow is GPU-accelerated in modern browsers for smooth rendering. However, very large blur radii (>50px) or many layered shadows (4+) can cause performance issues on lower-end devices.
Shadow animations (transitioning box-shadow values) are expensive. Use transform and opacity animations instead, or animate the shadow via a pseudo-element with opacity changes.
For complex shadow effects, consider using images or SVG filters as alternatives on static elements. For interactive elements requiring dynamic shadows, stick with CSS for responsive behavior.
box-shadow works in all modern browsers: Chrome, Firefox, Safari, Edge. No vendor prefixes needed since 2012. IE9+ has full support.
For IE8 and below (if still required), use filter: progid:DXImageTransform.Microsoft.Shadow(...) or provide a solid border fallback.
Multiple shadows (comma-separated values) work in all modern browsers. Ensure fallback shadow works independently if later shadows fail to render.
How developers use shadow designers daily
Implement Material Design's 24-level elevation system using layered box-shadows. Different elevation levels communicate component hierarchy and interactivity. Essential for Material-UI, Angular Material, or custom implementations.
Create depth perception for interactive elements using shadow transitions. Buttons and cards elevate on hover, press down on click, and return to rest state. Shadows provide tactile feedback without complex animations.
Create visual hierarchy for modals, dialogs, and popovers with prominent shadows. Overlays need strong shadows to establish they're above page content. Combine with backdrop blur for glassmorphism effects.
Design accessible focus indicators using box-shadow instead of default browser outlines. Shadow-based focus states match design systems while maintaining WCAG accessibility compliance for keyboard navigation.
Master shadow creation and customization
This shadow designer provides visual controls for creating box-shadow CSS with real-time preview. Adjust shadow position, blur, spread, color, and opacity visually, then copy production-ready CSS code.
Horizontal Offset: Drag the slider or enter a value to move the shadow left (negative) or right (positive). 0 centers the shadow horizontally. Common values: -5px to 5px for subtle depth, -20px to 20px for dramatic effects.
Vertical Offset: Controls vertical position. Positive values move shadow down (element appears raised), negative moves up (element appears floating above). Most UI shadows use positive vertical offset (0-20px) simulating overhead lighting.
For centered shadows (appearing all around the element), set both horizontal and vertical offset to 0. This creates a glow effect when combined with blur.
Blur Radius: Controls shadow softness. 0 = sharp edge (solid shadow), higher = softer, more diffused. Common values: 4-12px for subtle shadows, 20-40px for dramatic depth. Very high blur (50px+) can impact performance.
Spread Radius: Expands (positive) or contracts (negative) the shadow before blur is applied. Positive spread makes shadow larger than element, negative makes it smaller. Use spread to control shadow intensity without changing blur. Common values: -5px to 10px.
Blur and spread work together: high blur + negative spread creates soft, close shadows. Low blur + positive spread creates sharp, pronounced shadows.
Click the color picker to choose shadow color. Black (default) creates realistic shadows. Colored shadows create stylized, brand-specific effects.
Opacity (alpha channel) controls shadow intensity. 10-30% alpha creates subtle, realistic shadows. 50-80% creates dramatic, pronounced shadows. 100% solid shadows look artificial - always use some transparency.
For realistic depth, use dark gray (#1a1a1a) at 20% opacity instead of pure black. For brand-specific shadows, use your primary color at 10-15% opacity.
Click "Add Layer" to create layered shadows. Material Design uses 2-3 layers for realistic depth:
Layer 1 (Ambient): Small blur, close to element. Represents ambient light scattering. Example: 0 2px 4px rgba(0,0,0,0.1)
Layer 2 (Penumbra): Large blur, further from element. Represents shadow blur from distance. Example: 0 8px 16px rgba(0,0,0,0.15)
Layer shadows by decreasing opacity and increasing blur for each layer. This simulates how real shadows transition from dark (close) to light (far).
Toggle "Inset" to create internal shadows that appear pressed or recessed. Inset shadows render inside the element boundary, creating depth inward.
Use inset shadows for:
Combine regular and inset shadows for complex effects: outset shadow for depth, inset shadow for texture.
Toggle preview modes to see shadows in different contexts:
Background color toggle shows shadow on light vs dark backgrounds. Some shadows look different depending on background.
Click "Copy CSS" to copy box-shadow declaration to clipboard. The generated code includes:
For Tailwind, click "Copy Tailwind" to get utility class or config extension syntax.
Click "Presets" for common shadow patterns:
Presets provide starting points for customization.
Very large blur radii (>50px) can cause rendering performance issues. Test on lower-end devices.
Animating box-shadow directly (transition: box-shadow) is expensive. Prefer:
For static shadows on many elements, performance is excellent. For shadows on hundreds of animated elements, consider simplifying.
Everything you need to know about CSS shadows
Your shadow data never leaves your browser
Your shadow design data never leaves your browser. This designer operates entirely client-side using JavaScript and CSS. There are no server uploads, no backend processing, and no data transmission to any external services.
This makes the tool safe for creating shadows with proprietary designs, client-specific styles, or confidential design systems. Use with confidence for commercial projects.
Performance metrics and capabilities