Box-Shadow Generator

What is a box-shadow and button generator?#

A box-shadow is the CSS rule that paints a drop shadow behind an element. Despite the name, it does much more than shadows: layered correctly it produces the soft elevation that makes modern UI cards and buttons feel physical, it can carve an inset groove for a “pressed” state, and it can mimic a colored glow around a focused input. The catch is that getting one shadow right means juggling five values per layer (offset X, offset Y, blur, spread, color) plus an optional inset keyword — and most real buttons stack two or three layers, so you end up tuning ten to fifteen numbers by hand.

This page removes the arithmetic. You stack shadow layers and dial in a button’s radius, border, padding, and colors in the sidebar; the right pane shows a live button with the shadow applied, and writes out both the .btn CSS rule and the matching <button> HTML, ready to paste. The default you see on load is the familiar two-layer elevated button used across modern design systems — a fine starting point you then nudge toward your own brand.

How to use it#

The sidebar holds the controls; the right pane holds the preview, the CSS output, and the HTML output.

1. Build the shadow. Under Shadow layers, click + Add layer to stack a new layer. Each layer has six controls:
   • Offset X / Offset Y — how far the shadow shifts right/down (negative goes left/up). 0/0 centers it, producing an even glow.
   • Blur — how soft the edge is. 0 is a hard, flat copy; large values diffuse it. Blur cannot be negative in CSS.
   • Spread — grows or shrinks the shadow’s footprint. Negative spread tightens a wide blur into a tight, convincing edge.
   • Color — a hex color. Use the alpha channel (an 8-digit hex like #00000033) to make the shadow translucent; fully opaque colors render as solid #RRGGBB.
   • Inset — flip this to paint the shadow inside the element (a pressed-in, carved look) instead of behind it.
   • Move up / Move down / Delete reorder or remove layers. The first layer in the list paints on top; the last sits furthest back.
2. Style the button. Under Button, set the Label text, then the Radius, Border width, Border color, Padding Y / X, Background color, and Text color. Color fields pair a hex text box with a native color picker.
3. Copy what you need. Copy next to CSS output grabs the full .btn rule; Copy next to HTML output grabs the <button> element. Setting border width to 0 collapses the border into border: none;.

Key features#

• Multiple layers, in order. A convincing shadow is almost always two or three layers — a tight dark edge close to the element and a softer, lighter wash further out. You can stack and reorder as many as you need.
• Alpha-aware color serialization. A fully opaque color is emitted as clean #RRGGBB; the moment you add transparency it switches to rgba(r, g, b, a) with a trimmed alpha — the forms real stylesheets actually use.
• The whole button in one rule. Radius, border, padding, background, text color, and the shadow are all emitted into a single .btn block, so one paste styles the element completely.
• HTML that matches. The HTML output is just <button class="btn">Label</button>, with the label HTML-escaped — even a label full of < or & is safe to paste.
• Live preview pinned left-to-right. A positive X offset always shifts the shadow to the right, so the preview is forced LTR regardless of page language.

Worked example#

The page loads with a ready-made elevated indigo button. Its shadow is two layers: a tight -1px spread edge hugging the button, and a wider, fainter wash further out. The exact generated CSS:

.btn {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.102);
  border-radius: 8px;
  border: none;
  padding: 10px 20px;
  background-color: #4F46E5;
  color: #FFFFFF;
}

Notice the two layers work together: the first (4px 6px blur, -1px spread, 0.2 alpha) defines the crisp contact edge; the second (10px 15px blur, -3px spread, 0.102 alpha) supplies the ambient lift. Drop the alpha and the shadow turns into a flat black stamp; raise the spread and the button looks like it’s floating too high.

For a pressed state, clear those layers and add a single one: Inset on, offset 0/2, blur 4, spread 0, color #00000033. The output becomes inset 0 2px 4px rgba(0, 0, 0, 0.2) — the element now looks sunk into the surface, perfect for an :active style.

FAQ#

Why does the color come out as rgba(...) when I typed a hex?#

When your hex has an alpha channel (8 digits, like #00000033), the tool serializes it as rgba(r, g, b, a) because that is the form most CSS tooling and older browsers parse reliably. A fully opaque color — no alpha, or alpha at FF — stays as the compact #RRGGBB. Both render identically to what you dialed in; it is purely about which notation is more robust downstream.

What order do the layers paint in?#

The first layer in the list is painted on top, the last on the bottom. For a natural elevation, put the sharp, dark, close layer first and the soft, light, far layer second — that way the tight contact edge is not smothered by the ambient wash. Reorder with Move up / Move down until the preview reads right.

Blur or spread — what’s the difference?#

Blur softens the edge of the shadow (a gradient from full color to transparent). Spread grows or shrinks the entire shadow by a fixed amount before blur is applied — positive spread makes it bigger and more solid, negative spread eats into it and is the secret to a tight, professional edge on a wide-blur layer. A common mistake is reaching for blur alone and getting a puffy cloud; adding -2px or -3px of spread snaps it back into shape.

Can I use this shadow on a div, not a button?#

Yes. The CSS works on any element that accepts box-shadow — copy just the box-shadow: line (or the whole rule renamed to your selector) and drop the button-specific declarations you do not need. The HTML output is only relevant when you actually want a <button>.