Open tools

CSS & Design

CSS box shadow

Build a box shadow and copy the CSS.

In the browser

The shadow is drawn in this tab. Copy the CSS into your stylesheet.

About this tool

Build a box shadow and copy the CSS.

Move the horizontal and vertical offsets and the blur, then pick a color. The card updates and the declaration is ready to paste into a stylesheet.

The shadow is a screen effect. It does not match a printed drop shadow. Check it on the real background before you ship the page.

Read the privacy line on this page before you use the result in public.

Quick steps

  1. Build a box shadow and copy the CSS.
  2. Move the horizontal and vertical offsets and the blur, then pick a color. The card updates and the declaration is ready to paste into a stylesheet.
  3. The shadow is a screen effect. It does not match a printed drop shadow. Check it on the real background before you ship the page.

Read the privacy line on this page before you use the result in public.

FAQ

Build a box shadow and copy the CSS.

Move the horizontal and vertical offsets and the blur, then pick a color. The card updates and the declaration is ready to paste into a stylesheet.

The shadow is a screen effect. It does not match a printed drop shadow. Check it on the real background before you ship the page.

Read the privacy line on this page before you use the result in public.

A useful next step

CSS corner radius Set four corner radii and copy the CSS. CSS gradient Build a two-color linear gradient and copy the CSS. Color Tools HEX, RGB, HSL conversion and contrast vs white.

Site policies: Privacy · Terms