Genera sombras CSS con vista previa en vivo. Añade múltiples capas de sombra para profundidad y realismo.
Arrastra los controles para ajustar el desplazamiento horizontal, vertical, el radio de desenfoque, la extensión, el color y la opacidad de una sombra CSS. Marca Inset para un efecto de sombra interior. La vista previa se actualiza en tiempo real.
Usa los controles para ajustar cada parámetro de sombra. Marca Inset para una sombra interior. Haz clic en la muestra de color para cambiarlo. El CSS generado se actualiza en tiempo real — haz clic en Copiar para obtenerlo.
Las sombras son una de las formas más rápidas de decirle al usuario qué está por encima de la página, qué se puede pulsar y qué debe sentirse separado del fondo. En la práctica, lo útil no es escribir la sintaxis de box-shadow de memoria. Lo útil es encontrar un tratamiento de profundidad que encaje con el componente, el fondo y el resto de la interfaz.
Esta herramienta convierte esa búsqueda en un proceso visual de ajuste, en lugar de prueba a ciegas con números.
Esta herramienta es útil porque convierte esa prueba y error en un proceso visible de ajuste.
Una sombra bien medida puede levantar un panel lo justo para que se lea como su propia capa.
Algunos controles necesitan profundidad para parecer accionables. Muy poca y se ven planos; demasiada y se sienten pesados o anticuados.
La UI flotante necesita separarse visualmente del contenido que queda detrás. Las sombras son una de las formas más simples de crear esa distinción.
Si un componente necesita una sombra enorme para llamar la atención, quizá el problema sea la jerarquía del layout y no la sombra.
Las sombras pesadas enturbian una interfaz muy rápido. Aumentos pequeños suelen tener más efecto del que parece.
La misma sombra que funciona sobre un fondo blanco puede verse totalmente mal sobre una superficie oscura o visualmente cargada.
Es un buen caso porque importan diferencias visuales pequeñas y normalmente necesitas algo más sutil que lo que escribirías de memoria.
Las sombras inset son útiles cuando un campo o control debe sentirse hundido en lugar de elevado.
Si un equipo ya usa un estilo de sombra concreto, un generador facilita replicar y reutilizar el valor exacto en vez de aproximarlo a ojo.
Esta herramienta genera CSS de sombra. No decide si el componente debería estar en una capa más alta, si todo el sistema visual está equilibrado o si el efecto es adecuado en cualquier contexto. Ayuda con la sombra, no con toda la jerarquía de la interfaz.
Las sombras son uno de esos detalles que la gente solo nota cuando se sienten mal. Un generador ayuda a llegar antes a “se siente bien” y con menos retoques arbitrarios.
La extensión expande (valor positivo) o contrae (valor negativo) la sombra antes de aplicar el desenfoque. Una extensión positiva hace la sombra más grande que el elemento; negativa, más pequeña.
CSS admite múltiples box-shadows como lista separada por comas. Genera cada sombra aquí por separado y combínalas manualmente: box-shadow: sombra1, sombra2;
Esta herramienta funciona completamente en tu navegador. Nada de lo que escribes o pegas se envía a ningún servidor — todo el procesamiento ocurre localmente en tu dispositivo.