Current shadow
The shadow and CSS update instantly.
Sample card
Use this preview to check depth, softness, and direction.
Box shadow ready to copy
Tweak the shadow visually and copy the full CSS syntax.
Shadow
--
CSS
--
Box shadow generator
Create CSS shadows, adjust offsets, blur, spread, and opacity, and copy the ready-to-use box-shadow code.
Adjust a CSS shadow with simple controls
Useful for cards, modals, panels, and any component that needs depth or separation from the background.
Use cases
When a box shadow generator is useful
Interfaces and cards
Helpful for creating soft or deep shadows for blocks, cards, and panels.
Buttons and floating elements
Useful for checking how the visual feel changes as you move offset, blur, and spread.
Design systems
Useful when you want to test shadow variations before locking a token or reusable style.
FAQ
Common questions about box shadow
Does it work without plugins or uploads?
Yes. The preview and calculations happen entirely in the browser.
Can I generate inset shadows?
Yes. Just enable the inset option to switch shadow type.
Does it copy ready-to-use CSS?
Yes. The tool outputs the full box-shadow syntax ready to paste.
Can I change color and opacity?
Yes. You can adjust both values and see the result in real time.
Keep exploring