Skip to content
QuickToolio
esEspañolenEnglishptPortuguêsfrFrançaisdeDeutschitItaliano

CSS box-shadow generator

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

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

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.

Technical details

  • Offset, blur and spread are in pixels; negative offsets move the shadow left or up.
  • The color field accepts any CSS color. Shadows usually look more natural with transparency, for example rgba(0, 0, 0, 0.2), rather than a solid color.
  • It generates a single shadow. To combine several (a soft wide one plus a short sharp one), separate them with commas in the final CSS.

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