Shadow layers
Edit layer 1
Hover and code options
Presets
Edit an existing box-shadow
How this box shadow generator works
Drag the dot in the offset pad to move the shadow, then adjust blur, spread, color, and opacity. The preview updates as you go, and the code panel below it is always ready to copy. Stack several layers for softer, more realistic depth, start from one of the presets, or paste a box-shadow from your own stylesheet to edit it visually. Code is available as plain CSS, a Tailwind arbitrary value, a CSS custom property, SCSS, a React style object, or a filter: drop-shadow() equivalent.
"Copy share link" saves the whole shadow in the page address, so you can bookmark it or send it to a teammate. Nothing is stored on a server.
The box-shadow syntax
box-shadow: [inset] offset-x offset-y blur spread color; box-shadow: 0 4px 12px -2px rgba(14, 36, 51, 0.15);
| Value | What it does |
|---|---|
inset | Optional. Draws the shadow inside the element instead of outside, as if the surface were pressed in. |
| offset-x | Horizontal shift. Positive moves right, negative moves left. |
| offset-y | Vertical shift. Positive moves down, which matches light coming from above. |
| blur | How soft the edge is. 0 gives a hard edge; larger values spread the fade over more pixels. Can't be negative. |
| spread | Grows or shrinks the shadow before it's blurred. Negative spread tucks the shadow under the element so it only shows on one side. |
| color | Any CSS color. A low-opacity color almost always looks better than solid gray. |
Separate layers with commas. The first layer in the list is drawn on top.
Tips for shadows that look natural
- Layer two or more shadows. A tight, darker shadow close to the element plus a wide, faint one further away mimics how real objects block light. The "Split into smooth layers" button builds this for you from a single shadow.
- Use negative spread with larger offsets. It keeps the shadow from bleeding out the sides when you only want depth below the element.
- Tint the shadow. A shadow in a dark version of your background or brand color looks richer than pure black, especially on colored backgrounds.
- Keep one light direction. If cards cast shadows downward, buttons and menus should too. Mixed directions make a page look unsettled.
- Go lighter on dark backgrounds. Black shadows barely show on dark themes. Rely on lighter surface colors for elevation, or use a subtle light outline with
0 0 0 1px.
box-shadow vs. filter: drop-shadow()
box-shadow always follows the element's rectangular box and border radius. filter: drop-shadow() follows the actual visible shape, so it's the right choice for transparent PNGs, SVG icons, and elements cut out with clip-path. The trade-off is that drop-shadow has no spread value and no inset option, so the drop-shadow tab in this tool leaves those out and says so.
Animating shadows without slowing the page
Transitioning box-shadow works, and for a few cards it's fine. On pages with many animated elements it can cause stutter, because the browser repaints the shadow on every frame. A common fix is to put the larger hover shadow on a ::after pseudo-element and fade its opacity instead, which the browser can animate on the GPU. The hover option here uses a simple transition, which is the right starting point for most sites.
Frequently asked questions
How do I add a shadow to only one side of an element?
Use a negative spread roughly equal to the blur, plus an offset toward the side you want. For a bottom-only shadow, try 0 8px 6px -6px rgba(0, 0, 0, 0.3). The "Bottom only" preset starts from exactly that.
How do I make an inner shadow in CSS?
Add the inset keyword to the start of the shadow. Tick "Inset" for any layer here. Inset and outer layers can be combined on the same element, which is how pressed and neumorphic styles are built.
Can I use this with Tailwind CSS?
Yes. The Tailwind tab outputs an arbitrary-value class like shadow-[0_4px_12px_rgba(0,0,0,0.15)], with spaces turned into underscores the way Tailwind expects. To reuse it across a project, add the value to boxShadow in your theme settings instead.
Why doesn't my shadow show up?
The usual causes are a parent with overflow: hidden clipping the shadow, an opacity set so low it's invisible on your background, or a later CSS rule overriding box-shadow. Inset shadows also won't show on an element with no size or padding.
Does box-shadow affect layout or element size?
No. Shadows are painted outside the normal box model, so they never push other elements around or change the element's width. They can overlap neighboring content, which is why cards in a tight grid sometimes need a little extra gap.
Which color format should I copy?
All three work in every current browser. rgba() is the most familiar. The modern rgb(0 0 0 / 0.1) form is what newer frameworks use. Eight-digit hex like #0000001a is compact but harder to read at a glance.