For dashboard cards
Use two soft layers to separate widgets from neutral backgrounds without making cards feel too heavy.
Colors Browser-only processing Updated March 19, 2026
Shadow Generator
Create custom box-shadows with a visual editor. Add multiple layers, copy Tailwind/shadcn exports, share encoded links, and save pinned presets locally.
Preview
Shadow Layers (2/4)
Layer 1
#000000
Layer 2
#000000
Share, Save, and Reuse
Export Shadow
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);How to Use
- Adjust X/Y offset sliders to position the shadow
- Use blur to soften the shadow edges
- Adjust spread to expand or contract the shadow
- Click the color swatch to change shadow color
- Toggle "Inset" for inner shadows
- Add up to 4 layers for complex effects
- Copy CSS, Tailwind arbitrary values, shadcn tokens, or Figma effect JSON
- Save a pinned preset or share your current setup with an encoded URL
Example Use Cases
For mobile UI depth
Use a smaller blur and tighter spread to keep shadow elevation readable on dense screens and low-power displays.
Use Cases
For dashboards and data-heavy UI
Build clear hierarchy with dependable contrast, semantic tokens, and readable data colors.
For brand palettes and design systems
Create reusable color scales and exports for CSS variables, Tailwind, and documentation handoff.
Glossary Terms
Frequently Asked Questions
What is box-shadow? ▼
Box-shadow is a CSS property that adds shadow effects around an element. It can create depth, elevation, and visual hierarchy in your designs.
What does inset do? ▼
An inset shadow appears inside the element instead of outside, creating an embossed or pressed-in effect.
Why use multiple shadow layers? ▼
Multiple layers create more realistic, natural-looking shadows. Combining a soft large shadow with a smaller sharp one mimics real-world lighting.
What is spread in box-shadow? ▼
Spread expands or contracts the shadow size. Positive values make the shadow larger, negative values make it smaller than the element.