Box Shadow Generator
Design layered CSS box-shadows with a live preview, presets, and one-click CSS or Tailwind export. All local.
This tool runs entirely in your browser. Your input is never uploaded.
Preview card
Live preview updates as you tune layers
box-shadow: 0px 1px 3px rgba(0,0,0,0.12), 0px 4px 6px -1px rgba(0,0,0,0.1);shadow-[0px_1px_3px_rgba(0,0,0,0.12),0px_4px_6px_-1px_rgba(0,0,0,0.1)]Paste an existing box-shadow value to keep editing it here.
Layers (2)
Layered shadows
Compose a box-shadow from as many layers as you need. Each layer has independent x/y offsets, blur, spread, color, opacity, an inset toggle, and an on/off switch so you can compare variants without deleting work. Reorder layers with the up and down buttons — CSS renders them in the order shown.
Presets
Start from Material, Soft, Neumorphism, Sharp, Inner, or Smooth presets, then fine-tune each layer. The preview card updates instantly against a light, dark, white, or slate background so you can judge dark and light shadows equally.
Import existing CSS
Paste a box-shadow: ... declaration (including multi-layer values) into the import box to keep editing it here. HEX, RGB, RGBA, HSL, and HSLA colors are all parsed back into editable layers.
Export
- CSS:
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 6px rgba(0,0,0,0.1); - Tailwind: a single arbitrary value class such as
shadow-[0_4px_6px_rgba(0,0,0,0.1)].
Your layers and preview background are saved in this browser. All processing happens locally.
Related tools
Border Radius Generator
Preview and fine-tune CSS border-radius for one or four corners, then copy CSS or Tailwind classes.
Open ToolGradient Generator
Design CSS gradients with draggable color stops and export CSS, Tailwind, and config.
Open ToolColor Converter
Convert colors, generate palettes, and check WCAG contrast locally.
Open Tool