What is CSS box-shadow?

box-shadow is a CSS property that adds shadow effects to elements. It can set horizontal offset, vertical offset, blur radius, spread radius, color, and whether it is an inset shadow. Multiple shadow layers can be stacked together, separated by commas.

How to create multi-layer shadow effects?

Simply separate multiple shadow values with commas in the box-shadow property. Each layer independently controls offset, blur, color, and other parameters. Multiple layers can simulate more natural lighting effects, such as Material Design elevation.

What is the inset shadow used for?

Adding the inset keyword places the shadow inside the element, commonly used to simulate recessed effects, input field focus states, pressed button effects, etc. Inset shadows can be used simultaneously with outer shadows without affecting each other.

How do opacity and color work together?

Shadow colors are recommended to use rgba format to control opacity for more natural effects. Pure black shadows typically don't need 100% opacity — 10%-40% is most common. This tool uses a slider to independently control opacity for easy adjustment.

Box Shadow

CSS Box Shadow Visual Configurator

Quick Presets:

Shadow Layer 1

X Offset

0px

Y Offset

4px

Blur Radius

10px

Spread Radius

0px

Color

Opacity25%

Inset Shadow

Generated CSS Code

box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);

Box Shadow Generator Guide

Key Features

Visual Configuration - Drag sliders to adjust shadow parameters in real-time
Multi-layer Shadows - Support for multiple shadow layers stacked together
Color Picker - Color picker with opacity control
Presets - Built-in common shadow presets

Use Cases

Shadow design for cards, buttons and other UI components
Visual feedback for hover, pressed and other interactive states
Depth and layered interface effects
Creative effects like neon glow and projections

Box Shadow

Generated CSS Code

Box Shadow Generator Guide

Key Features

Use Cases

常见问题

相关工具