Skip to content
QuickToolio
es - Espanolen - English

CSS box-shadow generator

Adjust offset, blur, spread and color of a CSS shadow with a live preview.

Processed on your device. Nothing is sent to any server.
box-shadow: 0px 8px 24px -4px rgba(16, 32, 29, 0.25);

Design a CSS shadow by adjusting offset, blur, spread and color, with a live preview and copy-ready box-shadow code.

Composes the CSS box-shadow syntax with its five parameters: horizontal offset, vertical offset, blur, spread and color, plus the inset option.

Use cases

  • Adding depth to a card or button.
  • Creating an elevation effect for a modal.
  • Designing a subtle inner shadow.

How it works

  1. 1

    Adjust the values

    Modify X/Y offset, blur, spread and color.

  2. 2

    Enable inset if needed

    Check the box for an inner shadow.

  3. 3

    Copy the CSS

    Copy the box-shadow property ready to paste.

Frequently asked questions

What does the 'spread' value do?
It controls how much the shadow grows or shrinks relative to the element's size; negative values make it smaller than the element.

Related tools

← Colors & design