Box-Shadow Generator
Create beautiful CSS box-shadows with live preview. Adjust offset, blur, spread, color, and generate ready-to-use CSS code instantly.
Live Preview
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
Shadow Controls
Shadow Presets
What is Box-Shadow?
The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radius, and color.
Box shadows are essential for creating depth and visual hierarchy in modern web design. They help elements stand out from the background and create a sense of elevation, making interfaces feel more tactile and three-dimensional.
Box-Shadow Syntax
The complete syntax for the box-shadow property is:
box-shadow: [inset] [horizontal] [vertical] [blur] [spread] [color];
Horizontal Offset (X)
Required. The horizontal distance of the shadow. Positive values place the shadow to the right of the element, negative values to the left.
Vertical Offset (Y)
Required. The vertical distance of the shadow. Positive values place the shadow below the element, negative values above.
Blur Radius
Optional. The blur radius of the shadow. The higher the number, the more blurred the shadow will be. Cannot be negative. Default is 0 (sharp edge).
Spread Radius
Optional. Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. Default is 0 (same size as element).
Color
Optional. The color of the shadow. If not specified, the browser will use the current text color. Can be any valid CSS color value (hex, rgb, rgba, hsl, etc.).
Inset
Optional keyword. Changes the shadow from an outer shadow (default) to an inner shadow, creating a pressed or recessed effect.
Common Use Cases
- Card Elevation: Create depth for cards, modals, and panels
- Button States: Add hover and active states to buttons
- Dropdown Menus: Elevate menus above the page content
- Image Galleries: Add subtle shadows to photos and thumbnails
- Form Elements: Create focus states and depth for inputs
- Navigation Bars: Separate header from content
- Tooltips & Popovers: Add depth to overlay elements
- Inner Shadows: Create inset effects for pressed buttons
Design Tips for Box-Shadows
- Keep It Subtle: Large, dark shadows can look dated. Prefer subtle, soft shadows
- Use Realistic Lighting: Shadows typically go down and right (positive X and Y values)
- Blur for Softness: Higher blur values create more realistic, softer shadows
- Multiple Shadows: Layer multiple shadows for more realistic depth
- Match Your Design: Shadow intensity should match your overall design style
- Consider Performance: Complex shadows can impact render performance
- Use with Hover: Increase shadow on hover for interactive feedback
- Dark Mode: Adjust shadow colors for dark backgrounds
Browser Compatibility
The box-shadow property is well supported across all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It's supported since:
- Chrome: Version 10+ (2011)
- Firefox: Version 4+ (2011)
- Safari: Version 5.1+ (2011)
- Edge: All versions
- Internet Explorer: Version 9+
No vendor prefixes are needed for modern browsers. For older browsers (IE8 and below), box-shadow is not supported and will simply not display.
FAQ
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1); This creates a layered shadow effect for more realistic depth.box-shadow creates a shadow for the element's box, while filter: drop-shadow() creates a shadow following the exact shape of the element, including transparent areas. Drop-shadow is useful for irregular shapes and PNG images with transparency.box-shadow: 0 0 20px #667eea; This creates a glow around the element. Adjust the blur radius and color to control the glow intensity.Usage Tips
- Use the sliders for quick adjustments and fine-tune with number inputs
- Start with a preset and customize it to your needs
- For cards, try: 0px 2px 8px rgba(0, 0, 0, 0.1)
- For elevated elements, try: 0px 8px 16px rgba(0, 0, 0, 0.15)
- Use inset shadows to create pressed button effects
- Copy the CSS directly and paste into your stylesheet
- Adjust opacity to control shadow intensity
- Negative spread values create more focused shadows