๐ŸฆŠFoxi Tools
๐Ÿ”ฒ

Box Shadow Generator

Create CSS box-shadow visually

Shadows

Shadow 1
5px
5px
15px
0px
box-shadow: 5px 5px 15px 0px #00000040;

๐Ÿ“– How to Use

  1. Adjust X and Y offset for shadow position
  2. Set blur and spread for shadow size
  3. Choose a color
  4. Add multiple shadows for layered effects

โœจ Features

  • โœ“Visual editor
  • โœ“Multiple shadow layers
  • โœ“Inset option support
  • โœ“Real-time preview
  • โœ“Automatic CSS code generation

โ“ FAQ

Q. What is Inset?

A. Inset displays the shadow inside the box. Useful for creating pressed button effects.

Q. How do I use multiple shadows?

A. Click Add Shadow to layer multiple shadows for a 3D effect.

๐Ÿ”— Related Tools

Gradient GeneratorText Shadow GeneratorBorder Radius GeneratorCSS Minifier
Box Shadow Generator - Free Online Tool | Foxi Tools