Skip to content
ToolsNest

CSS box-shadow generator

Adjust offset, blur, spread, colour and opacity with a live preview, then copy the box-shadow CSS.

box-shadow: 0px 8px 24px -4px rgba(31, 35, 64, 0.25);

Your text is processed in your browser as you type. It is not sent to ToolsNest servers or stored after you leave the page.

How to use the CSS Box Shadow Generator

  1. 1Move the sliders.
  2. 2Pick a colour and opacity.
  3. 3Copy the CSS.

Supported formats and limits

  • Single shadow layer.
  • Colour output in rgba().

Common uses

  • Card and button elevation.
  • Soft UI shadows.
  • Inset input fields.

Frequently asked questions

Why use negative spread?

A negative spread with larger blur keeps the shadow under the element, which usually looks more natural.

Related tools

CSS Gradient Generator

Build linear or radial gradients with live preview and copy the CSS.

Open tool

Color Contrast Checker

Check text and background colours against WCAG AA and AAA.

Open tool

Color Converter

Convert colours between HEX, RGB and HSL with a live preview.

Open tool