Create custom CSS box shadows with NexCalco’s free Box Shadow Generator. Adjust the shadow color, blur, spread, position, and opacity, then preview the result and copy the CSS for your website.
CSS Box Shadow Generator
Customize Your Shadow
Negative: left. Positive: right.
Negative: up. Positive: down.
Inset shadows appear inside the element instead of outside it.
Live Preview
Adjust the settings to see your shadow update instantly.
How to Use the CSS Box Shadow Generator
Use the CSS Box Shadow Generator to create shadows for cards, buttons, images, and other website elements.
- Choose a preset or customize the shadow settings.
- Adjust the horizontal and vertical offsets, blur, spread, color, and opacity.
- Preview your shadow as you make changes.
- Click Copy CSS to copy the generated code, or download it as a CSS file.
Example
A simple shadow for a website card might look like this:
box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.20);
border-radius: 10px;This creates a soft shadow below the element, helping it stand out from the background.
Frequently Asked Questions
What is a CSS box shadow?
A CSS box shadow adds a shadow around or inside an HTML element. It helps create depth and makes cards, buttons, and other elements stand out.
How do I create a soft box shadow?
Choose the Soft Shadow preset, or use a low opacity, moderate blur, and a small vertical offset. Adjust the settings until the preview looks right.
What do blur and spread mean?
Blur controls how soft the shadow looks. Spread controls how much the shadow expands or contracts around the element.
What is an inset box shadow?
An inset shadow appears inside an element’s border rather than outside it. It is useful for creating pressed or recessed effects.
Can I use the generated CSS on any website?
Yes. Copy the generated CSS and apply the box-shadow property to an HTML element using your website’s stylesheet or custom CSS settings.
Note: The preview demonstrates the shadow effect. The generated CSS can be applied to your own element, and the corner radius can be adjusted separately to match your design.