CSS Box Shadow Generator
CSS Box Shadow Generator
Create CSS box shadow effects for cards, buttons and divs - free generator with live preview
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.25);What is CSS Box Shadow Generator?
The CSS box-shadow property adds shadow effects to HTML elements, creating depth and visual hierarchy in web design. This free CSS box shadow generator helps developers create professional drop shadows for cards, buttons, modals, navigation menus, and any UI component. Box shadows make elements appear elevated (floating above the page) or pressed inward (using inset shadows). The box-shadow CSS property accepts values for horizontal offset, vertical offset, blur radius, spread radius, and shadow color with optional transparency. Our box shadow generator provides real-time preview and generates clean, copy-paste CSS code. Whether you need a subtle shadow for a minimalist card design, a pronounced drop shadow for a floating action button, or an inset shadow for pressed button states, this tool lets you customize every parameter visually without memorizing CSS syntax.
How to Use This Tool
Set the horizontal offset (X) to position the shadow left or right of the element
Set the vertical offset (Y) to position the shadow above or below the element
Adjust the blur radius to control shadow softness - higher values create softer, more diffused shadows
Adjust the spread radius to expand or shrink the shadow size
Choose a shadow color and adjust opacity for subtle or dramatic effects
Enable "Inset" to create inner shadows for pressed or recessed effects
Copy the generated CSS box-shadow code and paste it into your stylesheet
Examples
Features
- Create CSS drop shadow effects for cards and containers
- Generate inset box shadow for pressed button effects
- Adjust shadow offset, blur, and spread with sliders
- Pick shadow colors with transparency support (rgba)
- Real-time shadow preview as you adjust settings
- One-click copy box-shadow CSS code to clipboard
- Generated code works in all modern browsers
- Free online tool - no account or signup needed
Frequently Asked Questions
- How do I add a box shadow to a div in CSS?
To add a box shadow to a div, use the CSS box-shadow property. The syntax is: box-shadow: offset-x offset-y blur spread color. For example: .card { box-shadow: 0 4px 15px rgba(0,0,0,0.1); }. Use our box shadow generator to create the perfect shadow visually and copy the CSS code directly.
- What is the difference between CSS box-shadow blur and spread?
In CSS box-shadow, blur radius controls how soft or sharp the shadow edges appear - a blur of 0 creates a sharp shadow, while higher values like 20px create a soft, diffused glow. Spread radius controls the shadow size - positive values expand the shadow larger than the element, negative values shrink it. Combine both for realistic depth effects.
- How do I create an inset shadow in CSS?
To create an inset (inner) shadow in CSS, add the "inset" keyword to your box-shadow property: box-shadow: inset 0 2px 5px rgba(0,0,0,0.2). Inset shadows appear inside the element, creating a pressed or recessed effect. They are commonly used for input fields, pressed buttons, and well/container designs.
- Can I add multiple box shadows to one element in CSS?
Yes, CSS supports multiple box shadows on a single element. Separate each shadow with a comma: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). This technique creates more realistic, layered shadow effects often used in material design and modern UI frameworks.
- What is the best box shadow for cards in CSS?
The best CSS box shadow for cards uses subtle values: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06). This creates a soft elevation effect without being too dramatic. For hover states, increase the shadow: box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1). Use our generator to fine-tune the perfect card shadow.
- Is CSS box-shadow supported in all browsers?
Yes, CSS box-shadow has excellent browser support and works in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera without vendor prefixes. It has been fully supported since IE9 (2011), so you can safely use box-shadow in any web project without compatibility concerns.