Skip to content
Got A Tool
Developer Tools

CSS Box Shadow Generator

Create and copy one explicit CSS box-shadow value from pixel settings and an opaque HEX color.

Local CSS generation. Adjust one opaque sRGB shadow color and four pixel values. Your choices stay in this browser tab and are never uploaded.

Positive horizontal values move the shadow right; positive vertical values move it down. Blur must be zero or higher. A negative spread makes the shadow smaller.

Preview card
box-shadow: 0px 8px 24px -6px #0F172A;

Data handling

Storage and export controls

Retention
The tool's working state is kept only while this page is open. Inputs and results are not saved to persistent storage by Got A Tool.
Export
The tool may prepare a result after you run it. It downloads or copies it only when you choose that action.

Advertising and analytics are separate site services. We do not send selected tool input to them. Read the Privacy Policy for details.

How it works

Create a CSS box shadow in three steps

01

Set the offset

Use horizontal and vertical pixel values to position the shadow.

02

Adjust blur and spread

Use a non-negative blur and optional positive or negative spread.

03

Copy the declaration

Review the preview and copy the explicit CSS box-shadow declaration.

Clear limit

One shadow is a starting point, not a complete elevation system.

This tool creates one outer box shadow from opaque HEX color and pixel values. It does not create inset shadows, multiple layered shadows, alpha colors, focus styles, browser fallbacks, or a full component token system.

Explicit pixels

The output shows every offset, blur, and spread in pixels.

Visible preview

The sample card updates from the current values.

Copyable CSS

Copy one complete declaration for a stylesheet or component.

Local processing

Settings and generated CSS remain in the current browser tab.

Keep working

Related tools

CSS Gradient Generator

Create and copy a two-color linear CSS gradient from explicit sRGB colors and a degree angle.

Open tool →

HEX, RGB & HSL Color Converter

Convert one opaque sRGB color between normalized HEX, RGB, and HSL values locally.

Open tool →

Color Contrast Checker

Calculate the WCAG contrast ratio between two hexadecimal colors and check text-size thresholds.

Open tool →

Favicon Generator

Turn one image into common favicon, Apple touch, Android icon, manifest, and HTML snippet files.

Open tool →