Generador de sombra de caja

Los desplazamientos horizontal y vertical mueven la sombra a la derecha/izquierda y hacia abajo/arriba respecto al elemento; el radio de desenfoque suaviza su borde (0 es un borde nítido y los valores mayores lo suavizan); y el radio de expansión aumenta o reduce el tamaño de la sombra antes de aplicar el desenfoque. Una expansión negativa recoge la sombra, algo útil para elevaciones sutiles.

Añade otra capa: CSS permite apilar cualquier número de sombras en un mismo elemento separándolas con comas. La primera capa de la lista se pinta encima. Apilar una sombra estrecha y oscura sobre una ancha y suave es una forma habitual de lograr un efecto de profundidad realista.

Activa «Interior» para dibujar la sombra dentro de la caja de borde del elemento en lugar de fuera, lo que hace que la superficie parezca hundida o rehundida. Puedes combinar capas interiores y exteriores en el mismo elemento.

No. Todo funciona en tu navegador: la vista previa y el CSS generado se calculan localmente y nada de lo que ajustes se envía a un servidor. Copia el código y pégalo directamente en tu hoja de estilos.