Box Shadow Generator

Create beautiful CSS box-shadows with live preview

Shadow Controls

Adjust the values for each shadow layer

Shadow 1

Preview

Live preview of your box-shadow

Preview Box

100 × 100

box-shadow: 4px 4px 10px 0px #00000040;

Presets

Quick-start with popular shadow styles

Tips

box-shadow syntax:

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;
  • inset: Shadow inside the element (optional)
  • offset-x: Horizontal offset (required)
  • offset-y: Vertical offset (required)
  • blur-radius: Blur amount (default: 0)
  • spread-radius: Size increase/decrease (default: 0)
  • color: Shadow color (default: text color)

Related tools

Color Contrast Checker

Advanced WCAG accessibility compliance checker with color blindness simulation, multiple text sizes, and comprehensive analysis features.

Color Converter

Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing

Color Extractor

Extract colors from uploaded images by hovering over pixels to get precise color values.

Color Generator

Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.

CSS Filter Generator

Advanced visual CSS filter generator with Instagram-style presets, custom image upload, drop-shadow effects, and multi-format export capabilities.

CSS Gradient Generator

Visual CSS gradient generator. Create linear and radial gradients with multiple color stops and copy the CSS code.