Cómo funciona
El Generador de sombras CSS te da una interfaz visual para crear declaraciones box-shadow: ajusta el desplazamiento, el desenfoque, la extensión, el color y la opacidad con controles deslizantes y ve la sombra actualizarse en vivo sobre un elemento de prueba.
La propiedad box-shadow de CSS tiene 6 parámetros: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de extensión, color y la palabra clave opcional inset. Acertar con la combinación de memoria es complicado; este generador lo vuelve visual e inmediato.
Cómo usarlo: mueve los controles de desplazamiento horizontal (de −50 px a 50 px), desplazamiento vertical (de −50 px a 50 px), radio de desenfoque (de 0 a 100 px) y extensión (de −50 px a 50 px). Elige el color de la sombra con el selector (con control de opacidad para rgba). Activa "Inset" para alternar entre sombras exteriores e interiores. Añade varias capas de sombra con el botón + (CSS admite varias sombras separadas por comas). Pulsa Copiar para obtener la declaración box-shadow lista para usar.
Efectos que puedes conseguir: interfaces suaves o neumorfismo (dos sombras desplazadas ±5 px con poco desenfoque), capas de elevación (sombras pequeñas y cerradas para superficies bajas, sombras grandes y difusas para las elevadas), sombras interiores para botones pulsados y efectos de resplandor usando color con mucha extensión y desplazamiento cero.
Truco con varias sombras: box-shadow acepta varios valores separados por comas. Apilar una sombra pequeña y marcada con otra más grande y difusa da una profundidad mucho más creíble que una sola sombra; es la técnica que usa el sistema de elevación de Material Design.
Preguntas frecuentes
- Sí. Pulsa 'Añadir capa de sombra' para apilar varios valores de box-shadow. CSS las procesa de delante hacia atrás: la primera de la lista queda encima. Combinar una sombra pequeña y marcada con otra grande y difusa da una profundidad realista.
- La extensión agranda (con valores positivos) o encoge (con negativos) la sombra más allá del radio de desenfoque. Una extensión de 5 px hace que la sombra sea 5 px más grande que el elemento en todas las direcciones. Una extensión negativa combinada con mucho desenfoque crea un efecto de resplandor concentrado.
- Las sombras inset aparecen dentro del límite del elemento en lugar de fuera. Se usan para estados de botón pulsado (parece que se hunde), efectos de borde interior y diseños de neumorfismo o interfaces suaves.
- Las sombras de color oscuro sobre fondos oscuros son invisibles. En diseños de modo oscuro, usa colores de sombra más claros o recurre a bordes y contornos. Puedes cambiar el fondo de la vista previa entre blanco y oscuro para comprobar los dos casos.
¿Puedo poner varias sombras en un mismo elemento?
¿Para qué sirve el radio de extensión?
¿Para qué se usan las sombras interiores (inset)?
¿Por qué mi sombra se ve distinta sobre un fondo oscuro?
Scrollshot — Full Page Screenshot & Annotate
Scrolls the page for you, captures it viewport by viewport and stitches the slices into one seamless image — then opens an editor so you can crop, annotate and blur before saving.