Build box-shadow and text-shadow CSS visually with multiple layers, live preview, and one-click copy.
Presets:
The CSS Box Shadow Generator lets you design box-shadow and text-shadow effects visually using sliders for offset X/Y, blur radius, spread, color, and opacity. You can stack multiple shadow layers to create complex, realistic depth effects and see the result live on an adjustable preview element before copying the CSS.
It's ideal for UI developers who want pixel-perfect shadows without trial-and-error in their code editor. All processing happens directly in your browser — no data is sent to any server.
Yes. CSS supports comma-separated shadow lists on both box-shadow and text-shadow. Use the + Add Layer button to stack as many layers as you need — the generator outputs all of them as a single valid CSS declaration.
Spread radius (only available on box-shadow, not text-shadow) expands or contracts the shadow before blur is applied. A positive value grows the shadow in all directions; a negative value shrinks it, which is useful for focused directional shadows.
The inset keyword moves the shadow inside the element's border, creating a recessed or pressed-in look. It's commonly used for form inputs to convey focus, for concave UI elements, or for active/pressed button states where the element should appear sunken.