Free CSS box shadow generator with stackable layers
This CSS box shadow generator lets you build a shadow visually, watch it render on a live preview and copy the finished code. You can stack up to 8 layers, switch to text-shadow, and export plain CSS, a Tailwind CSS class or an SCSS variable. 66Colorful is free, runs in your browser and needs no signup.
How to create a box shadow in 6 steps
- Pick a starting point under Shadow presets (Soft, Layered, Floating, Sharp, Glow or Pressed), or keep the default single layer.
- Click a row in CSS Shadow Layers to select it. Change its color with the swatch or HEX field in that row.
- Adjust X offset, Y offset, Blur radius, Spread and Opacity in the Selected Shadow Layer panel. Tick Inset (inner shadow) for an inner shadow.
- Press Add shadow layer or Duplicate to build a multi-layer stack. Drag the grip handle to reorder, or use the eye icon to hide a layer.
- Test the result on the Checker, Light or Dark background, and change the Element color and Corner radius to match your component.
- Choose CSS, Tailwind CSS or SCSS under CSS Shadow Code and press the copy button.
CSS box shadow syntax explained with an example
A CSS box-shadow value lists an optional inset keyword, two to four lengths and a color. The order is horizontal offset, vertical offset, blur radius, spread radius, then color. The MDN box-shadow reference documents every part, and the CSS Backgrounds and Borders Module Level 3 defines how shadows are drawn.
The tool's default layer shows the pattern. It outputs box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);, which means no horizontal shift, 10px down, 25px of blur, 5px of negative spread and black at 25% opacity.
CSS box shadow settings and their ranges
| Setting | What it changes | Range in the tool |
|---|---|---|
| X offset | Moves the shadow left (negative) or right (positive) | -100 to 100 px |
| Y offset | Moves the shadow up (negative) or down (positive) | -100 to 100 px |
| Blur radius | Softens the edge; 0 gives a hard edge | 0 to 150 px |
| Spread | Grows or shrinks the shadow before blur is applied | -50 to 50 px |
| Opacity | Sets the alpha of the shadow color | 0 to 100% |
| Inset | Draws the shadow inside the element edge | On or off |
How to make a realistic layered shadow
Realistic depth usually comes from several soft shadows, not one heavy one. Light in the real world produces a tight contact shadow plus a wide ambient shadow, and stacking two or three layers copies that effect.
The Layered preset is a good model. It combines a small, faint layer (0 1px 3px at 12%) with a larger, softer one (0 8px 24px -4px at 15%). Start there and adjust each layer on its own.
Layer order in a CSS box shadow stack
In CSS, the first shadow in a comma-separated list sits on top of the ones after it. The tool follows this: the top row in the layer list paints on top. Drag a row's handle, or focus it and press Arrow Up or Arrow Down, to change the order.
Box shadow tips for natural-looking depth
- Keep opacity low. Values between 8% and 25% usually look more natural than 50% or more.
- Increase Y offset and blur together. Higher elevation means a longer, softer shadow.
- Use negative spread. A spread of -4 to -12 px keeps a large blur from spilling past the sides of the element.
- Tint instead of black. The Floating preset uses a dark slate color so the shadow blends with the page.
How do you make an inset shadow in CSS?
Add the inset keyword to a shadow layer, and the shadow is drawn inside the element's border instead of outside. In the tool, select a layer and tick Inset (inner shadow).
The Pressed preset pairs a dark inset shadow at the top left with a light inset shadow at the bottom right, which gives a pushed-in button look. For a full soft-UI style built on this idea, try the Neumorphism Generator.
Text-shadow generator mode for styling type
Switch Shadow type to text-shadow to style type instead of boxes. The preview becomes an editable text sample, so you can click it and type your own words. The label for the color control changes to Text color.
The text-shadow property accepts only offsets, blur and color. It has no spread and no inset, so the tool hides those controls and ignores them in this mode. Text presets include Soft, Lifted, Retro, Neon, Outline and Deep.
Keep text readable. A glow or hard offset can lower legibility, so run your final colors through the WCAG contrast checker. For fills that run through the letters themselves, use the Gradient Text Generator.
Copy box-shadow code for CSS, Tailwind and SCSS
The CSS Shadow Code panel has three tabs, and each one updates as you move a slider. Hidden layers are left out of the output. If every layer is hidden, the CSS value is none.
- CSS: a
box-shadowortext-shadowdeclaration. Multiple layers are placed on separate lines. - Tailwind CSS: an arbitrary-value class such as
shadow-[0_10px_25px_-5px_rgba(0,0,0,0.25)], plus a theme variable snippet for Tailwind CSS v4 that you can register once and reuse. - SCSS: a
$box-shadow(or$text-shadow) variable and a rule that uses it.
The Copy CSS and Copy Tailwind buttons below the code panel copy the declaration or the class without switching tabs. To turn shadow colors into design tokens across a project, the CSS Variable Theme Generator is the next step.
CSS box shadow vs filter drop-shadow: which to use?
Use box-shadow for rectangular components and filter drop-shadow for shapes with transparent areas. The box-shadow property follows the element's rectangular box (including rounded corners), while the drop-shadow() filter follows the visible alpha shape of the content, such as a transparent PNG or SVG icon.
This tool generates box-shadow and text-shadow values only. For cards, buttons, inputs and modals, that covers nearly every case. If an element has an irregular outline, a drop-shadow filter may fit better, and you can reuse the offset, blur and color numbers you tuned here as a starting point.
Share and reset your shadow design
The Share link button copies a URL that restores every layer, plus the preview background, element color and corner radius. Send it to a teammate or save it as a bookmark. Reset returns the tool to a single default layer.
Common CSS box shadow mistakes to avoid
Most problems with a CSS box shadow come from a few repeated habits. Check these before you copy the code into your stylesheet.
- Shadows that are too dark. A 50% black shadow on a white card looks heavy. Lower the opacity before you raise the blur.
- Judging on one background. A shadow that works on white can disappear on a dark surface. Switch between Light and Dark in the preview, and note that dark interfaces often need a stronger or tinted shadow.
- Forgetting border radius. A box-shadow follows the element's rounded corners. Set Corner radius to your real component value.
- Stacking too many layers. Two or three layers are enough for most cards. Many large blurs can cost rendering time on big pages.
- Using shadows as the only separator. Shadows are decorative and may not be visible to everyone. Keep borders or contrast where the boundary matters.
Where designers and developers use CSS shadows
A CSS box shadow generator saves guesswork on depth. Shadows signal elevation: cards, dropdowns, modals and buttons that sit above the page. A small shadow suggests a resting card, and a larger one suggests a floating menu or dialog.
Glow effects use a colored shadow with zero offset and a wide blur, like the Glow preset. For frosted panels that depend on soft shadows, see the Glassmorphism Generator. If you need the exact RGB values of a shadow color, the HEX to RGB Converter gives them directly.
Ready to pair shadows with a color system? Pick surface and accent colors from the Tailwind CSS color reference, then return here to tune the depth.