Box Shadow Generator
Create beautiful CSS box-shadow effects with live preview. Customize multiple shadow layers, adjust properties, and copy ready-to-use CSS code.
Presets
Shadow Layers
1/5 layers • Click to edit
Layer #1 Properties
CSS Code
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);Live Preview
Preview Tips
- • Adjust sliders to see changes in real-time
- • Try presets for common shadow styles
- • Layer multiple shadows for complex effects
- • Change background color to test contrast
Multiple Layers
Stack up to 5 shadow layers for depth and complexity.
Live Preview
See your shadow update instantly as you adjust properties.
Ready-to-Use CSS
Copy generated CSS code directly to your project.
Common Use Cases
Card Components
Add depth to cards, panels, and content containers with subtle shadows.
Buttons & CTAs
Create floating button effects or pressed states with inset shadows.
Form Elements
Style input fields, dropdowns, and form containers with inset or outer shadows.
Neumorphic Design
Create modern neumorphic UI elements with dual light and dark shadows.
Modal Dialogs
Give modals and pop-ups elevation with floating shadow effects.
Frequently Asked Questions
What is a box shadow in CSS?
A box-shadow is a CSS property that adds shadow effects around an element's frame. You can control the shadow's horizontal offset, vertical offset, blur radius, spread radius, color, opacity, and whether it appears inside (inset) or outside the element. Multiple shadows can be combined for complex effects.
Can I create multiple shadow layers?
Yes! This tool supports up to 5 shadow layers. Multiple shadows are useful for creating depth, glow effects, or complex shadow designs like neumorphism. Each layer can have completely different properties, and they stack on top of each other in the order they appear.
What is the difference between inset and regular shadows?
Regular (outer) shadows appear outside the element's borders, creating a lifted or floating effect that makes the element appear above the page. Inset shadows appear inside the element's borders, creating a pressed, recessed, or carved effect. Use the inset checkbox to toggle between the two types.
What do the shadow properties mean?
Horizontal offset (x) moves the shadow left (negative) or right (positive). Vertical offset (y) moves it up (negative) or down (positive). Blur radius controls how soft the shadow edges are - higher values create softer shadows. Spread radius makes the shadow larger (positive) or smaller (negative) than the element. Color and opacity control the shadow's appearance and transparency.
How do I use the generated CSS?
Copy the generated CSS code using the "Copy CSS" button and paste it into your stylesheet. Apply it to any HTML element using a class or inline style. The box-shadow property works on all modern browsers (Chrome, Firefox, Safari, Edge) without vendor prefixes.
What are the best practices for box shadows?
Use subtle shadows for a professional look - high opacity or large blur values can look overwhelming. Keep shadows consistent across your design. Use lighter, softer shadows for subtle elevation and darker, sharper shadows for important elements. Test shadows on different background colors to ensure they work in all contexts.
What is neumorphic design?
Neumorphism (or soft UI) is a design trend that uses dual shadows - a light shadow on one side and a dark shadow on the opposite side - to create elements that appear to extrude from or press into the background. It works best on monochromatic backgrounds and creates a soft, modern aesthetic. Use the Neumorphic preset to try this style.