RubanTools
Suggest a Tool

CSS Box Shadow Generator

Build box shadows visually with live preview - adjust all parameters and add multiple layers. Copy the CSS in one click.

Shadow Settings
Live Preview

Box Shadow Guide

box-shadow: [inset] X Y blur spread color;
X: horizontal offset (positive=right). Y: vertical offset (positive=down). Blur: 0=sharp, higher=softer. Spread: positive expands shadow. Inset: shadow inside the element.

Separate shadow layers with commas: box-shadow: 2px 2px 5px rgba(0,0,0,.2), 0 8px 20px rgba(0,0,0,.1); Layered shadows create depth and elegance. The first layer is on top.

Material Design uses darker single-direction shadows (simulate light from top-left). Neumorphism uses two shadows - one light, one dark - on the same background colour as the element to create an extruded look. Use inset shadows for the "pressed" state.