Desarrollador / CSS
Generador de sombras de caja CSS
Crea visualmente una sombra CSS box-shadow: desplazamiento, desenfoque, expansión, color, opacidad, inset y varias capas, con ajustes predefinidos y vista previa en directo. Después, copia el CSS.
Generador de sombras de caja CSS: Cada capa se convierte en una sombra de la lista box-shadow: desplazamiento horizontal y vertical, radio de desenfoque, expansión y un color escrito como rgb() con la opacidad después de una barra. Las capas se dibujan con la primera por encima. Puedes cambiar el radio de las esquinas, el color y el fondo de la caja de vista previa para adaptarlos a tu diseño; la sombra sigue las esquinas tal como lo hará en tu página. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.
- Categoría
- Herramientas de desarrollo
- Se ejecuta
- En tu navegador
- Coste
- Gratis · sin registro
- Disponibilidad
- Lista para usar
Funciona por completo en tu navegador
CSS
box-shadow: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
Los valores son desplazamiento a la derecha, desplazamiento hacia abajo, desenfoque, extensión y color. Varias capas finas resultan más naturales que una sola sombra intensa; las capas posteriores se dibujan debajo de las anteriores.
Preajustes
Elevación
Los sistemas de diseño utilizan sombras para mostrar a qué distancia flota algo por encima de la página: una tarjeta en reposo tiene una sombra pequeña y definida, mientras que un menú o diálogo tiene una más grande y suave. Mantener unos pocos niveles fijos, en lugar de usar una sombra diferente en cada elemento, hace que la interfaz resulte coherente.
Las sombras apenas se ven sobre un fondo oscuro; en ese caso, un color de superficie más claro o un borde fino cumplen la misma función. Combina las sombras con un degradado CSS para botones y tarjetas.
Sombras y rendimiento
Un desenfoque grande requiere más recursos de dibujo que uno pequeño, algo importante cuando muchos elementos con sombra se desplazan o se animan a la vez. Para animar una sombra al pasar el cursor, es más fluido mostrar gradualmente una segunda sombra más intensa en un pseudo-elemento con opacidad que cambiar box-shadow en cada fotograma.
Cómo se usa
- Empieza con un ajuste predefinido o modifica el desplazamiento, el desenfoque, la expansión y la opacidad de la primera capa.
- Añade más capas para conseguir una sombra más suave y realista, o activa inset para colocar la sombra dentro de la caja.
- Copia la declaración box-shadow.
Privacidad y límites
Todo se ejecuta en tu navegador; la última sombra solo se guarda en este navegador.
Herramientas relacionadas
Preguntas frecuentes
¿Cuáles son los cuatro números de box-shadow?
El desplazamiento horizontal (un valor positivo mueve la sombra hacia la derecha), el desplazamiento vertical (un valor positivo la mueve hacia abajo), el radio de desenfoque (cuanto mayor, más suave; no puede ser negativo) y la expansión (un valor positivo hace que la sombra sea más grande que la caja y uno negativo, más pequeña). El color se escribe al final.
¿Cómo puedo conseguir que una sombra parezca natural?
Usa una opacidad baja, desplaza la sombra hacia abajo como si la luz viniera desde arriba y combina dos o más capas: una pequeña y más definida cerca de la caja, y otra más grande y suave a mayor distancia. Una expansión ligeramente negativa evita que un desenfoque amplio sobresalga por los lados.
¿Qué hace inset?
Dibuja la sombra dentro de la caja en lugar de fuera, de modo que la caja parece estar hundida. Es adecuado para campos de entrada y botones pulsados.
¿Por qué no aparece mi sombra en una imagen?
box-shadow se dibuja alrededor de la caja del elemento, no alrededor de la forma de la imagen que contiene. Para marcar el contorno de un PNG transparente, usa el filtro CSS drop-shadow().
Herramienta gratuita · se ejecuta en tu navegador · sin cuenta