Cómo se usa
- Elige una plantilla o empieza de cero.
- Ajusta cada capa: posición, desenfoque, extensión, color y opacidad.
- Copia el CSS.
El truco de las sombras realistas
En la vida real, un objeto proyecta una sombra corta y nítida cerca de su base y otra más grande y difusa. Por eso las mejores sombras de interfaz combinan dos o más capas: una pequeña y marcada, y otra amplia y suave con extensión negativa. Empieza con la plantilla “Suave”.
Preguntas frecuentes
¿Qué es la extensión (spread)?
Agranda o encoge la sombra antes de desenfocarla. Un valor negativo hace que la sombra quede por debajo del elemento y parezca más natural.
¿Y para texto?
El texto usa text-shadow, que admite los mismos valores salvo la extensión y la opción interior.
¿Te ha sido útil esta herramienta?