CSS Box Shadow Generator
CSS box-shadow creates depth and elevation effects. Syntax: box-shadow: horizontal vertical blur spread color. For example, box-shadow: 0 4px 6px rgba(0,0,0,0.1) creates a subtle drop shadow. Multiple shadows separate with commas. Inset keyword creates inner shadow. Common presets: card elevation (0 2px 8px), hover lift (0 8px 16px), neumorphism (multiple inset/outset). Browser support: universal.
Create custom CSS box shadows with a visual editor. Adjust offset, blur, spread, color, and opacity. Support for multiple shadow layers and inset shadows. Copy CSS code instantly.
Works OfflineDark ModeNo Ads
Preview
Presets
Shadow Layers
Layer 1 Settings
Inset Shadow
Generated CSS
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.2);Box Shadow Syntax
- Offset X: Horizontal shadow position (negative = left)
- Offset Y: Vertical shadow position (negative = up)
- Blur: Shadow blur radius (0 = sharp edge)
- Spread: Shadow expansion (negative = shrink)
- Inset: Places shadow inside the element
How to Use
- Enter your value in the input field
- Click the Calculate/Convert button
- Copy the result to your clipboard
Frequently Asked Questions
- What is CSS box-shadow?
- CSS box-shadow adds shadow effects around an element's frame. Syntax: box-shadow: h-offset v-offset blur spread color inset. Example: box-shadow: 10px 10px 20px 5px rgba(0,0,0,0.3) creates a shadow 10px right, 10px down, 20px blur, 5px spread, with 30% opacity black. Multiple shadows can be layered by separating with commas.
- What do the box-shadow values mean?
- Box-shadow has 6 values: (1) Horizontal offset (positive = right, negative = left), (2) Vertical offset (positive = down, negative = up), (3) Blur radius (larger = softer shadow), (4) Spread radius (positive = expand, negative = shrink), (5) Color (any CSS color format), (6) Inset keyword (optional, creates inner shadow). Only offset-x and offset-y are required.
- How do I create a drop shadow effect?
- For a realistic drop shadow, use positive horizontal and vertical offsets with moderate blur and subtle opacity. Example: box-shadow: 0 4px 6px rgba(0,0,0,0.1) creates a subtle shadow below the element. For elevated/floating effects, increase blur and offset: box-shadow: 0 10px 25px rgba(0,0,0,0.15). Avoid pure black; use rgba(0,0,0,0.1-0.3) for natural shadows.
- What is the difference between box-shadow and drop-shadow?
- box-shadow is a CSS property that adds shadows to an element's box (rectangular border area). drop-shadow is a CSS filter function that follows the element's actual shape, including transparency. For a PNG image with transparency, drop-shadow creates a shadow around the visible pixels, while box-shadow creates a rectangular shadow. Use filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)) for non-rectangular shapes.
- How do I create an inset (inner) shadow?
- Add the inset keyword to create an inner shadow: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2). This makes the element appear recessed or pressed. Combine inset and regular shadows for depth: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.2). Inset shadows are useful for input fields, pressed buttons, and embossed text effects.
- Can I use multiple box shadows on one element?
- Yes, separate multiple box-shadow values with commas. Example: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1) creates layered shadows for depth. You can combine inset and outset shadows: box-shadow: inset 0 -1px 0 rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.2). This technique is used for Material Design elevation levels.
- What are common box-shadow patterns?
- Material Design shadows: Small (0 2px 4px rgba(0,0,0,0.1)), Medium (0 4px 8px rgba(0,0,0,0.12)), Large (0 8px 16px rgba(0,0,0,0.15)). Neumorphism: box-shadow: 8px 8px 16px rgba(0,0,0,0.1), -8px -8px 16px rgba(255,255,255,0.7). Glow effect: box-shadow: 0 0 10px 5px rgba(59,130,246,0.5). Flat bottom: box-shadow: 0 2px 4px rgba(0,0,0,0.1).
- Does box-shadow affect layout or performance?
- box-shadow does not affect layout — it does not take up space in the box model or push other elements. Shadows are painted outside normal document flow. However, complex shadows (large blur radius, multiple shadows, animated shadows) can impact rendering performance. For animations, prefer transform and opacity over animating box-shadow. Use will-change: box-shadow for better performance when animating.