Skip to main content
Tools Star Hub
Developer Tools category

Box Shadow Generator

Tune offset, blur, spread and color, then copy a CSS box-shadow value.

What is Box Shadow Generator?

A box shadow generator lets you tune offset, blur, spread and color, then copy a CSS box-shadow value.

Loading tool…

This tool runs in your browser. Inputs, files and generated values stay on this device. Favorites and recently used tools, if you use them, store only tool names in local storage — never passwords, documents or QR contents. See the privacy policy.

Box Shadow Generator — CSS box-shadow — Tools Star Hub

What this tool does

Tune one CSS box-shadow and copy the declaration, with a preview that uses the same numbers. Use it when a card or a button needs a drop shadow or an inset shadow. Offsets, blur, and spread become whole pixels, and stacked shadows have to be combined in your stylesheet.

How to use

  1. Adjust horizontal and vertical offset, blur, spread, color and opacity.
  2. Turn on inset if you want an inner shadow.
  3. Copy the CSS. The preview uses the same values.

Examples

  • A soft drop shadow

    box-shadow: 0 8px 24px rgba(15, 39, 68, 0.2);

How it works

Offset shifts the shadow. Blur softens the edge. Spread grows or shrinks the shadow before blur. Opacity is applied as RGBA. The preview and the copied CSS use the same computed value.

Limitations

The generator writes a single box-shadow. Comma-separated layers are not assembled for you. Offsets, blur, and spread are rounded to whole pixels, and a color the parser rejects yields no declaration. The preview is a sample box, not an element from your page.

See the disclaimer for what these tools do not cover.

FAQ

Is the Box Shadow Generator free?
Yes. Tuning one CSS box-shadow and copying the declaration is free, with no signup.
Can I stack several shadows?
This version generates one shadow. You can combine copied values manually in your stylesheet if you need layers.
Are the pixel values rounded?
Offsets, blur, and spread become whole pixels in the copied CSS. A fractional slider position does not stay fractional.
Does inset change the color?
Inset only draws the shadow inside the box. Color and opacity stay at the values you set.

Related tools

Helpful guides

Guide

How to Write a CSS Gradient

Build a linear, radial or conic CSS gradient from at least two color stops and copy the background or gradient text CSS.

Read guide

Guide

How to Write One CSS Box Shadow

Set one offset, blur, spread, color, and opacity, then copy a single box-shadow declaration.

Read guide