Herramientas · CSS · Crear una sombra CSS
Crear una sombra CSS
Crea una sombra CSS de varias capas (box-shadow) con vista previa en vivo, y copia el código.
Añade un archivo y ejecuta la herramienta.
Tu archivo está listo.
Prueba otro archivo, o inténtalo de nuevo.
Ajustes
Ajusta la configuración de abajo. El resultado se actualiza sobre la marcha.
Funciona por completo en tu navegador. No se sube ningún archivo.
Funciona por completo en tu navegador. Nada se sube nunca a un servidor.
Cómo funciona
Empieza con un preajuste, o ajusta tú mismo el desplazamiento, el desenfoque, la expansión y el color de una capa.
Añade más capas para dar profundidad (hasta 4 en total), o elimina cualquiera de ellas.
Copia el CSS box-shadow terminado.
Preguntas frecuentes
Sí, hasta cuatro capas. Se muestran en el orden en que las añades, que es también el orden en que CSS las aplica, así que la primera capa queda más cerca del elemento.
El desplazamiento horizontal y vertical mueve la sombra. El desenfoque suaviza su borde. La expansión agranda o reduce la sombra antes de aplicar el desenfoque.
Dibuja la sombra dentro del borde del elemento en lugar de fuera, para un aspecto hundido.
No. Todo ocurre en tu navegador, y no se envía nada a ningún sitio.
Guías
Una mirada más de cerca a problemas concretos que resuelve esta herramienta.
Why One Flat Shadow Looks Fake, and Layered Ones Don't
A single box-shadow value usually reads as a sticker glued behind the element, not an object lifted off the page. Real light casts two different kinds of shadow at once, and CSS can only fake that with more than one layer.
Leer la guíaHow to Build a Layered CSS Box-Shadow
The exact steps for building a real, comma-separated box-shadow value with more than one layer, plus the two settings people get backwards: spread versus blur, and inset versus outer.
Leer la guíaInset vs. Drop Shadow: Which One Your Design Actually Needs
The same four numbers - offset, blur, spread, opacity - mean opposite things depending on one checkbox. Here's how to tell which direction a given piece of UI actually calls for.
Leer la guía
Comentarios