Color Tools

CSS Box Shadow Generator

Generate CSS box-shadow with sliders for X/Y offset, blur, spread, color, and opacity. Toggle inset mode and copy the ready-to-use CSS instantly.

X / Y / Blur / Spread
Opacity Slider
Inset Toggle
Live Preview
Copy CSS

x4px

y4px

blur8px

spread0px

Opacity0.25

Color

css

box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.25);

CSS box-shadow generator

The box-shadow property adds depth outside or inside an element. It accepts horizontal offset, vertical offset, blur radius, spread radius, color, and the optional inset keyword.

box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .25);

Layer multiple shadows with comma-separated declarations for realistic elevation, highlights, and inset effects.

Frequently Asked Questions

What CSS properties does this generate?: This tool generates a CSS box-shadow property with configurable X offset, Y offset, blur radius, spread radius, color, opacity, and inset toggle.
Can I add multiple shadows?: Yes. You can add up to 5 shadow layers and they will be combined into a single CSS box-shadow declaration.
Does it support inset shadows?: Yes. Toggle the Inset option to make a shadow appear inside the element instead of outside.
How do I use the CSS in my project?: Click Copy CSS to copy the generated rule to your clipboard, then paste it into your stylesheet.

Disclaimer

This tool is provided for general informational and utility purposes only. Results may be inaccurate, incomplete, outdated, or contain errors. Always verify results before relying on or using them.

Some tools may use AI, automated processing, third-party services, or server-side processing. Do not rely on these tools as a substitute for professional advice.

Use at your own risk. BestToolOnline makes no guarantees regarding the accuracy, reliability, completeness, availability, or suitability of results, to the maximum extent permitted by applicable law.

See our Terms of Service and Privacy Policy for complete details.

Loading tool...

CSS box-shadow generator

The box-shadow property adds depth outside or inside an element. It accepts horizontal offset, vertical offset, blur radius, spread radius, color, and the optional inset keyword.

box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .25);

Layer multiple shadows with comma-separated declarations for realistic elevation, highlights, and inset effects.

Frequently Asked Questions

What CSS properties does this generate?

This tool generates a CSS box-shadow property with configurable X offset, Y offset, blur radius, spread radius, color, opacity, and inset toggle.

Can I add multiple shadows?

Yes. You can add up to 5 shadow layers and they will be combined into a single CSS box-shadow declaration.

Does it support inset shadows?

Yes. Toggle the Inset option to make a shadow appear inside the element instead of outside.

How do I use the CSS in my project?

Click Copy CSS to copy the generated rule to your clipboard, then paste it into your stylesheet.

Disclaimer

Some tools may use AI, automated processing, third-party services, or server-side processing. Do not rely on these tools as a substitute for professional advice.