Box Shadow Generator

Summary

Visually design CSS box shadows with live preview, then copy the ready-to-use CSS property.

How it works

1. Use the sliders to set horizontal offset, vertical offset, blur radius, and spread radius.
2. Choose a shadow color and adjust its opacity with the dedicated controls.
3. Toggle Inset to switch between outer and inner shadows.
4. The preview box updates instantly to reflect every change.
5. Click "Copy CSS" to copy the ready-to-paste CSS value to your clipboard.
6. Add multiple shadow layers using the "Add Layer" button for stacked effects.

Use cases

• Generate drop shadows for cards, buttons, and modals.
• Create inset shadows for pressed or sunken UI elements.
• Layer multiple shadows for depth and material-style effects.
• Prototype shadow styles before committing to a design system.
• Learn how individual CSS box-shadow parameters affect the result.
• Export ready-to-use CSS for React, Vue, or plain HTML projects.

Frequently Asked Questions