What is a CSS box shadow generator?

A CSS box shadow generator lets you preview shadow settings — horizontal and vertical offset, blur radius, spread, and color — and outputs the ready box-shadow declaration. Use the tool above to get your answer instantly - it is free and requires no signup.

How do I create a neumorphism effect with box-shadow?

Neumorphism pairs two shadows on the same background color: a dark shadow offset one way and a light shadow offset the opposite way. This generator produces one standard shadow layer; for the classic soft-UI look, run it twice (once with a dark color, once with a light color) and comma-separate the two declarations in your CSS.

How can I make a drop shadow with CSS?

A drop shadow is just a box-shadow with a small vertical offset and soft blur, e.g. box-shadow: 0 4px 8px 0 #333333;. Enter offsetX 0, offsetY 4, blur 8, spread 0 and your color in the tool above, then copy the generated code.

Where do I paste the box shadow CSS code?

Paste the generated box-shadow declaration into any CSS rule for the element you want shadowed — your stylesheet, a block, or an inline style attribute. It works on any element with a background so the shadow has something to fall on.

What do the offset, blur and spread values mean?

Offset (X/Y) moves the shadow horizontally and vertically; blur radius softens its edge (larger = softer, and it cannot be negative); spread grows (positive) or shrinks (negative) the shadow before blur is applied. The tool writes them in exactly this CSS order: offsetX offsetY blur spread color.

Box Shadow Generator (Free CSS)

What is Box shadow generator?

Box Shadow Generator — Free box shadow generator — set offset, blur, spread and shadow color, then copy ready-to-paste CSS box-shadow code for your site in seconds.

The shadow declaration is assembled with the template-literal string-building approach from the vendored neumorphism app (BSD-3, Adam Giebl) — its Configuration.js code-string builder — and colors are validated with its own pure isValidColor hex check (3-digit hex is expanded to 6 digits exactly as its colorLuminance normalizes). The tool produces one standard outer box-shadow layer; it does not model neumorphic dual light/dark pairs or inset shadows, and color input is hex-only.

Why use this box shadow generator?

🎯

Built for box shadow generator

Free box shadow generator — set offset, blur, spread and shadow color, then copy ready-to-paste CSS box-shadow code for your site in seconds.

📋

Transparent & honest

Only 6-digit (or expandable 3-digit) hex colors are accepted — named colors and rgb()/hsl() strings are rejected because the underlying validator is hex-only.

🔒

Private by design

Everything runs in your browser. Your inputs never leave your device.

📱

Works everywhere

Fully responsive — perfect on desktop, tablet, and mobile. No app needed.

🔄

Regularly updated

Regularly maintained and reviewed to ensure accuracy.

💡

Free forever

No accounts, no limits, no watermarks. Use Box Shadow Generator as much as you need.

How to use Box Shadow Generator

1Type the "Horizontal offset (px)" and "Vertical offset (px)" — positive X pushes the shadow right, positive Y pushes it down.
2Set the "Blur radius (px)" to soften the shadow edge and the "Spread (px)" to grow or shrink it.
3Enter your shadow color in the "Shadow color" box as a hex value like #a0a0a0.
4Run the tool to generate the box-shadow declaration.
5Copy the CSS code from the result and paste it into your stylesheet or inline style.

What can you do with Box Shadow Generator?

Css box shadow generator — Free box shadow generator — set offset, blur, spread and shadow color, then copy ready-to-paste CSS box-shadow code for your site in seconds.
Make drop shadow with css — Free box shadow generator — set offset, blur, spread and shadow color, then copy ready-to-paste CSS box-shadow code for your site in seconds.
Where to paste box shadow css code — Free box shadow generator — set offset, blur, spread and shadow color, then copy ready-to-paste CSS box-shadow code for your site in seconds.
What offset blur spread values mean — Free box shadow generator — set offset, blur, spread and shadow color, then copy ready-to-paste CSS box-shadow code for your site in seconds.

Good to know

Only 6-digit (or expandable 3-digit) hex colors are accepted — named colors and rgb()/hsl() strings are rejected because the underlying validator is hex-only.
Blur radius cannot be negative (CSS forbids it); the tool rejects negative blur instead of silently clamping.
The output is a single standard outer box-shadow layer — no inset keyword, no dual light/dark neumorphic pair.

How it works

The shadow declaration is assembled with the template-literal string-building approach from the vendored neumorphism app (BSD-3, Adam Giebl) — its Configuration.js code-string builder — and colors are validated with its own pure isValidColor hex check (3-digit hex is expanded to 6 digits exactly as its colorLuminance normalizes). The tool produces one standard outer box-shadow layer; it does not model neumorphic dual light/dark pairs or inset shadows, and color input is hex-only.

Examples

Soft card shadow

Status: ok — box-shadow: 10px 10px 20px 0 #a0a0a0;

Tight dark shadow with spread

Status: ok — box-shadow: 0 4px 8px 2px #333333;

Defaults with blank fields

Status: ok — blank fields fall back to the placeholder defaults: box-shadow: 10px 10px 20px 0 #a0a0a0;

People also search for these — this tool handles them all:

box shadow generatorcss box shadow generatormake drop shadow with csswhere to paste box shadow css codewhat offset blur spread values mean