No Login Data Private Local Save

Box Shadow CSS Generator - Online Shadow Effect Designer

Developer Tools Generator box shadow CSS design generator
52
0
0
0
Shadow Settings
Shadow Layers
Click a layer to edit it. Drag not supported yet.
Live Preview

Frequently Asked Questions

What is box-shadow in CSS?

The box-shadow property adds shadow effects around an element's frame. You can specify multiple shadows separated by commas. Each shadow is defined by horizontal/vertical offset, blur radius, spread radius, color, and optionally the inset keyword.

What is the difference between blur and spread?

Blur radius controls how sharp or soft the shadow edge is. Larger values create a softer, bigger blur. Spread radius expands or contracts the shadow size without affecting blur. Positive values enlarge the shadow; negative values shrink it.

How do I create an inner shadow?

Use the inset keyword inside the box-shadow value, e.g. box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);. Our generator includes an Inset checkbox that adds this keyword to the current layer.

Can I combine multiple shadows?

Yes! Add multiple layers using the Add Layer button. Each layer can have its own offset, blur, spread, color, and inset setting. The CSS output will list them comma-separated.

What makes a shadow look realistic?

Use semi-transparent black (rgba(0,0,0,0.1-0.3)), a soft blur, a slight vertical offset, and optionally a subtle spread. Adding a very small second shadow with less blur can enhance depth. Avoid pure black shadows.

Is box-shadow supported in all browsers?

Yes, box-shadow is widely supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. It works on IE9+. The inset keyword is also fully supported.

🔧 Related Tools