ToolPronto
ENEnglish
EnglishPortuguês (Brasil)EspañolDeutschFrançais日本語ItalianoNederlandsBahasa IndonesiaTürkçe
All tools

ToolPronto

CSS Box Shadow Generator

Tune layered shadows visually and copy the exact box-shadow CSS.

Your files and entries stay on this device.

Favorites are saved only in this browser.

CSS Box Shadow Generator

Tune layered shadows visually and copy the exact box-shadow CSS.

Settings 1
box-shadow: 0px 12px 30px 0px rgb(23 32 27 / 22%);Processed only in this browser.

What CSS Box Shadow Generator does

Tune layered shadows visually and copy the exact box-shadow CSS. Your files and entries stay on this device. A visual preview does not replace browser testing or an accessibility review.

Useful for

  • Use it to design a subtle shadow for a card.
  • Use it to combine layered shadows for depth.
  • Use it to copy the exact box-shadow declaration.

How to use it

  1. Add the file, text, or setting you want to work with.
  2. Adjust the visible controls and review the result.
  3. Copy or download the result when it is ready.

All tools

CSS Gradient GeneratorBuild linear or radial gradients visually and copy valid CSS.Color CheckCheck WCAG contrast and build a usable palette.CSS Formatter & MinifierFormat or conservatively minify CSS without applying it to the page.