Create account
Interfaces and CSSRuns in your browser

CSS box-shadow Generator

Build a clean card or panel shadow from explicit numeric parameters without third-party libraries or hidden CSS side effects.

  • Offset/blur/spread
  • HEX + opacity
  • Copyable CSS
Online tool

Try the tool

Add your data, choose the settings, and get the result.

Input

Result

.shadow-card {
  box-shadow: 0px 18px 48px 0px rgba(15, 23, 42, 0.18);
}

Your data stays here

Text and selected files are processed in the current browser and are not sent to a server to produce the result.

Reviewed: 2026-07-17
01

How to use it

  1. 1

    Enter X/Y offset, blur, and spread.

  2. 2

    Choose a HEX color and opacity from 0 to 1.

  3. 3

    Check the preview and copy the declaration.

02

What the tool can do

  • Negative X/Y offsets within a bounded range.
  • Blur up to 400 px and spread from -200 to 200 px.
  • HEX to rgba conversion for controlled opacity.
03

Common use cases

  • Choosing a shadow token for cards and dropdowns.
  • Replacing border-heavy UI with elevation.
  • Quickly checking a shadow before moving it into CSS variables.
04

How it works inside

The color is emitted as rgba after safe HEX parsing.

All numeric parameters are bounded to avoid accidental huge CSS values.

05

Questions and answers

Can it create multiple shadows?

No. The current version generates one shadow for a predictable token workflow.

Why is the color entered as HEX?

HEX is easy to validate, and opacity is added separately in the rgba output.