FileConverterPro

Box Shadow

Create CSS box shadows with a visual editor online for free. Adjust offset, blur, spread, color, and inset. Copy CSS in one click. No signup.

Runs entirely in your browser — files never uploaded

Shadow layers
CSS
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

How to use Box Shadow

  1. 1. Adjust the sliders. Move offset X/Y, blur, and spread sliders. The preview box updates in real time.
  2. 2. Pick a color & opacity. Choose a shadow color and set the opacity. Works great for subtle, semi-transparent shadows.
  3. 3. Toggle inset. Check 'Inset' to create an inner shadow instead of an outer one.
  4. 4. Add more layers. Click '+ Add layer' to stack multiple shadows. Select a layer to edit its values individually.
  5. 5. Copy the CSS. Hit 'Copy' to get the full box-shadow rule on your clipboard, ready to paste into your stylesheet.

FAQ

Can I use multiple shadows in CSS?

Yes! CSS supports comma-separated shadow values. This tool lets you add as many layers as you want and generates a single box-shadow rule with all of them.

What does 'spread' do?

Spread expands (positive) or shrinks (negative) the shadow before blurring. A spread of 0 makes the shadow the same size as the element.

What's the difference between inset and normal?

A normal shadow sits outside the element. An inset shadow sits inside, creating a pressed-in or recessed look.

Will this work in all browsers?

Yes — box-shadow is supported in every modern browser, including IE9+. No vendor prefixes needed.

Related tools

Advertisement