What is CSS box-shadow?

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas.

How do I use this generator?

Use the sliders to adjust horizontal and vertical offset, blur and spread radius. You can also pick a shadow color and toggle the inset option.

Create beautiful box shadows for your web projects with layers, colors, and live preview.

Preview

See how your shadow looks on a box.

Box Color

Background Color

Output Code

Copy the generated CSS or Tailwind code.

CSS

box-shadow: 10px 10px 15px 0px rgba(0,0,0,0.3);

Tailwind CSS

shadow-[10px_10px_15px_0px_rgba(0,0,0,0.3)]

Shadow Layers

Manage multiple shadow layers.

Layer Settings

Inset

Horizontal Offset10px

Vertical Offset10px

Blur Radius15px

Spread Radius0px

Shadow Color (Hex/RGBA)

Presets

Start with a popular shadow preset.

Compare two text files and find differences line-by-line. Text diff tool with syntax highlighting fo…

Generate MD5, SHA1, SHA256, SHA512, and other cryptographic hashes online. Hash text, files, and pas…

Convert HTML to Markdown and Markdown to HTML instantly. Supports headings, links, images, lists, ta…

Convert numbers between binary, octal, decimal, and hexadecimal bases. Base converter with support f…

Test and debug regular expressions online with real-time matching. RegEx tester with syntax highligh…

Build and validate cron expressions visually. Generate cron schedules with a user-friendly UI, see n…