Shadow Controls
px
px
px
px
Preview Settings
200px
Live Preview
Preview
Generated Code
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.15);
CSS Box Shadow Generator
Create beautiful CSS box shadows with live preview and multiple layers
Shadow Presets
Subtle Shadows
Medium Shadows
Strong Shadows
Material Design
Neumorphic
CSS Box Shadow Generator - Create Beautiful Shadows with Live Preview | Free Tool
Professional CSS box shadow generator with live preview, multiple layers, and Material Design presets. Generate CSS, SCSS, and Tailwind code instantly. Create neumorphic, inset, and multi-layered shadows with ease. No signup required.
Features
- Interactive live preview with real-time shadow updates
- Multiple shadow layers with independent controls for complex effects
- Professional shadow presets including Material Design and Neumorphic styles
- Generate CSS, SCSS, Tailwind, and JavaScript code formats
- Full RGBA color support with precise opacity control
- Inset and outer shadow options for versatile effects
- Custom preview box with adjustable size and background
- Responsive shadow controls with slider and numeric inputs
- Layer management with reorder, visibility toggle, and delete
- Copy to clipboard in multiple code formats instantly
- Dark and light theme support for accurate preview
- Mobile-friendly interface with touch-optimized controls
- No installation or signup required - works directly in browser
- Professional presets: Soft, Card, Elevated, Dramatic, and more
How to use
- Adjust shadow properties using intuitive sliders for offset, blur, and spread values to create your desired shadow effect
- Choose shadow color using the color picker with full RGBA support and opacity control for perfect transparency
- Toggle between outer and inset shadows to create elevated or recessed visual effects for different UI elements
- Add multiple shadow layers by clicking Add Layer button to create complex shadow combinations and realistic depth
- Select from professional presets including Subtle, Material Design, and Neumorphic categories for instant shadow styles
- Preview shadow in real-time on the interactive box with customizable size, background color, and shape options
- Customize preview box size using the slider and change background color to match your design context accurately
- Copy generated CSS code in your preferred format: pure CSS, SCSS variables, Tailwind utilities, or JavaScript objects
- Manage multiple layers with visibility toggle, reorder controls, and individual layer selection for precise editing
- Use layer controls to move shadows up or down, hide specific layers, or remove unwanted shadow effects easily
Tips & Best Practices
- All processing happens in your browser — no data is sent to any server.
- Use the copy button to quickly transfer results to your clipboard.
- The tool works offline once loaded — no internet connection required for processing.
- Check the FAQ section below for answers to common questions.
- Share this tool with colleagues using the social sharing buttons.
FAQ
What's the difference between blur radius and spread radius in box shadows?
Blur radius controls how soft or diffused the shadow edges appear - higher blur values create softer, more gradual shadows while lower values create sharper shadows. Spread radius expands (positive values) or contracts (negative values) the shadow size before the blur is applied. Think of spread as making the shadow bigger or smaller, and blur as making it softer or harder. For example, a spread of 10px makes the shadow 10px larger in all directions before blurring begins.
When should I use inset shadows instead of regular outer shadows?
Inset shadows create an inner shadow effect that makes elements appear recessed or pressed into the page, perfect for creating depth in the opposite direction. Use inset shadows for input fields to show they're clickable areas, pressed button states to indicate interaction, sunken panels for visual hierarchy, or neumorphic soft UI designs. Outer shadows (default) make elements appear elevated above the surface, while inset shadows make them appear below the surface level.
How do I create authentic Material Design shadows using this generator?
Material Design uses layered shadows with different blur and opacity values to simulate realistic lighting. Our Material Design presets follow Google's official elevation guidelines with combinations of sharp umbra shadows (small blur, higher opacity) and soft penumbra shadows (large blur, lower opacity). You can also manually create Material shadows by combining two layers: first layer with small Y offset and blur using rgba(0,0,0,0.2), second layer with larger Y offset and blur using rgba(0,0,0,0.14). The key is using multiple subtle shadows rather than one strong shadow.
Can I use multiple shadow layers and how do they work together?
Yes, CSS supports unlimited box shadow layers separated by commas in the code. Multiple layers stack on top of each other with the first layer appearing on top and subsequent layers below. Use our layer system to create complex effects like glowing borders (combine colored shadows), realistic depth (layer soft and sharp shadows), or neumorphic designs (combine light and dark shadows). Each layer has completely independent controls for offset, blur, spread, color, and inset properties, giving you total creative freedom.
What are neumorphic shadows and how do I create them?
Neumorphism (also called Soft UI) creates a subtle extruded plastic or embossed effect using two opposing shadows: a light shadow on one side and a dark shadow on the opposite side. Our neumorphic presets demonstrate this technique perfectly. To create manually, use two shadow layers - first with positive X/Y offsets using a dark color like rgba(0,0,0,0.15), second with negative X/Y offsets using a light color like rgba(255,255,255,0.7). This works best when element background matches the page background for seamless integration.
How do I create colored shadows for modern design effects?
Instead of traditional black or gray shadows, use your brand or accent colors with reduced opacity (typically 20-40%) for unique modern effects. For example, a blue button could use rgba(59,130,246,0.3) for a subtle blue glow that reinforces brand identity. Colored shadows work best with moderate blur (8-20px) and minimal or zero spread. Avoid using fully opaque colors as they look unrealistic - always include transparency. Layer multiple colored shadows for rainbow or gradient glow effects popular in modern UI design.
What's the best shadow configuration for standard UI cards?
Card shadows should provide subtle elevation without overwhelming the content or competing for attention. A professional card shadow uses Y offset of 2-4px, blur radius of 8-12px, spread of 0px, and color of rgba(0,0,0,0.08-0.15). Our Subtle Shadows category includes perfect card presets like Card and Hover states. Avoid harsh shadows with high opacity or excessive blur that make cards look disconnected from the page. The goal is gentle elevation that adds depth without distraction.
How do negative offset values work in box shadows?
Negative X offset values move shadows to the left while positive values move right. Negative Y offset values move shadows upward while positive values move downward. This is crucial for controlling light direction and creating realistic lighting effects. For example, X: -5px, Y: -5px creates a shadow in the top-left corner, simulating light from bottom-right. Combine negative and positive offsets on multiple layers to create complex directional lighting or wrap-around shadow effects for maximum realism and depth.
Can I animate box shadows and what's the performance impact?
Yes, box shadows can be animated using CSS transitions or keyframe animations, but use caution as animating blur or spread is GPU-intensive and can cause performance issues, especially on mobile devices. For smooth animations, transition between pre-defined shadow states on hover or focus events rather than continuously animating shadow properties. Consider using transform and opacity animations instead when possible. Our generator helps you create the perfect start and end states for your shadow transitions without performance concerns.
How do I export and share my custom shadow configurations?
Use our code generation feature to copy shadows in multiple formats: pure CSS for direct stylesheet use, SCSS format for variables and mixins, Tailwind arbitrary values for utility-first workflows, or JavaScript object format for styled-components and CSS-in-JS solutions. Simply adjust your shadow to perfection, select your preferred code format (CSS, SCSS, Tailwind, or JS), and click the Copy button. The code is instantly copied to your clipboard ready for pasting into your project with zero manual formatting needed.