b2KIT

Box Shadow CSS Generator

Design box shadows visually with multiple layers and copy the CSS code.

How to Use Box Shadow CSS Generator

  1. 1

    Set shadow values

    Adjust horizontal offset, vertical offset, blur, and spread.

  2. 2

    Choose shadow color

    Pick a color and set the opacity for the shadow effect.

  3. 3

    Copy the CSS

    Click copy to grab the generated box-shadow CSS property.

Tested tool guide Design and color tools Checked July 30, 2026

What Box Shadow CSS Generator does, with a checked example

This editor turns horizontal offset, vertical offset, blur radius, spread radius, color, opacity, and inset state into a CSS box-shadow declaration. Multiple layers can be combined, while separate background and box colors make light and dark shadows easier to judge before copying the code.

Worked example

A concrete input and expected output from the current implementation.

Input

x 4px, y 4px, blur 16px, spread 0px, black at 25% opacity

Expected output

box-shadow: 4px 4px 16px 0px rgba(0, 0, 0, 0.25);

Positive x and y offsets move the shadow right and down. Blur softens the edge, while zero spread keeps the original shadow footprint before blur.

How the result is produced

1

Each shadow is a complete layer

Comma-separated layers are painted front to back. Combining a narrow dark layer with a broad faint layer can produce a more natural depth cue.

2

Inset reverses the visual placement

An inset shadow is drawn inside the border edge instead of outside the box. It is useful for pressed controls, wells, and internal shading.

Good uses

  • Tune elevation for a card or dialog.
  • Build a layered focus or glow treatment.
  • Compare shadow behavior on different surface colors.

Limits and checks

  • Large blur areas can increase paint cost on animated elements.
  • Subtle shadows can disappear on low-quality or high-glare displays.
  • A shadow should not be the only indicator of focus or state.

Common questions

What is the difference between blur and spread?

Spread grows or shrinks the solid shadow shape before blur is applied. Blur controls softness around that shape.

Can one element have several shadows?

Yes. CSS accepts comma-separated shadow layers, and this generator produces that syntax when layers are added.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools

Color Picker + HEX/RGB/HSL/CMYK

Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.

Print Color Preview

Preview how screen colors translate to print with CMYK simulation and proofing.

Font Preview Tool

Preview any Google Font at various sizes, weights, and with custom sample text.

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with a visual editor and code output.

Color Palette Generator

Generate harmonious color palettes from a base color using color theory rules.

Color Blindness Simulator

Simulate how colors appear to people with various types of color vision deficiency.