Generador de box-shadow CSS: sombras en capas, neumorfismo y text-shadow
Diseña efectos box-shadow y text-shadow en capas con vista previa en vivo y ajustes predefinidos de elevación, neumorfismo y resplandor, y copia el CSS.
box-shadow: 0 10px 30px -6px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.1);
shadow-[0_10px_30px_-6px_rgba(15,23,42,0.18),0_4px_10px_-4px_rgba(15,23,42,0.1)]
Funciona por completo en tu navegador. Nada de lo que introduces se nos envía ni se guarda. Ver todas las herramientas gratis.
¿Encontraste un problema o algo que podría mejorar? Leemos todos los mensajes y lo arreglamos rápido.
Este generador de box-shadow CSS gratis te permite diseñar sombras a ojo y copiar el CSS exacto de box-shadow o text-shadow. Apila todas las capas que necesites, cada una con su propio desplazamiento horizontal y vertical, desenfoque, extensión, color, opacidad y ajuste inset, y míralas sobre una tarjeta de vista previa cuyo fondo, color y radio de esquina puedes cambiar para que coincidan con tu diseño.
Las sombras realistas casi nunca son de una sola capa. Una sombra nítida y cercana junto con otra grande y tenue se perciben como un objeto que se separa de la página, que es como funcionan los niveles de elevación de Material Design, y el neumorfismo necesita dos sombras opuestas sobre una tarjeta del mismo color que su fondo. Los presets cubren estos patrones, y las notas de abajo explican la sintaxis de box-shadow, por qué las capas quedan mejor y cuánto cuestan las sombras en rendimiento de renderizado.
Cómo usarla
- Elige Box shadow o Text shadow.
- Empieza con un preset o ajusta la capa seleccionada con los controles deslizantes: desplazamientos, desenfoque, extensión, color, opacidad e inset.
- Añade más capas con + Añadir capa (copia la seleccionada), selecciona una capa en la lista para editarla y reordénalas con las flechas. La primera capa se dibuja encima.
- Ajusta la vista previa a tu diseño: define el fondo de la página, el color de la tarjeta y el radio de las esquinas.
- Copia el CSS o la clase de Tailwind con valor arbitrario.
Preguntas frecuentes
¿Qué significan los valores de box-shadow?
box-shadow: inset? desplazamiento-x desplazamiento-y desenfoque extensión color. El desplazamiento x mueve la sombra a la derecha (negativo: a la izquierda) y el desplazamiento y la mueve hacia abajo (negativo: hacia arriba). El desenfoque indica lo suave que es el borde; 0 da un borde duro. La extensión agranda la sombra antes de desenfocarla (en negativo la encoge, que es como se evita que un desenfoque grande asome por los lados). Inset dibuja la sombra dentro del elemento en lugar de fuera. Las sombras múltiples se separan con comas, y la primera se pinta encima.
¿Cómo hago una sombra suave y realista?
Superpón dos o más sombras de baja opacidad en lugar de una oscura: una pequeña y ceñida para el borde de contacto (0 1px 2px con un negro de alrededor del 10 %) y otra más grande y suave para la luz ambiental (0 8px 24px entre el 8 y el 12 %). Usa una extensión ligeramente negativa en la grande para que quede debajo del elemento. Teñir la sombra con una versión oscura del color de fondo, en lugar de negro puro, también queda más natural en páginas con color.
¿Cómo creo un efecto de neumorfismo?
Dale al elemento el mismo color de fondo que a su contenedor y añade dos sombras: una más oscura desplazada hacia abajo y a la derecha, y otra más clara (a menudo blanca) desplazada hacia arriba y a la izquierda, por ejemplo 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5) sobre #e0e5ec. Hazlas inset para el estado pulsado. Ten cuidado al usarlo en controles: los botones neumórficos tienen muy poco contraste con su fondo y no suelen cumplir el requisito de 3:1 de WCAG para componentes de interfaz a menos que añadas un borde o un contorno más marcado.
¿Qué diferencia hay entre box-shadow y filter: drop-shadow()?
box-shadow sigue la caja rectangular del elemento, incluido su border-radius, y admite extensión e inset. filter: drop-shadow() sigue los píxeles visibles, así que traza el contorno de un PNG transparente, un icono SVG o una forma recortada, pero no tiene extensión ni inset y solo acepta una sombra por función. Usa box-shadow para tarjetas y botones, y drop-shadow para imágenes e iconos irregulares.
¿Puede text-shadow tener extensión o inset?
No. text-shadow solo admite desplazamiento x, desplazamiento y, desenfoque y color. Para simular un contorno, apila cuatro o más sombras duras desplazadas 1px en cada dirección (el preset Contorno) o usa -webkit-text-stroke, que ya tiene una compatibilidad amplia. Una sombra de texto suave y de baja opacidad puede mejorar la legibilidad del texto blanco sobre fotos, pero no cuenta para el contraste de WCAG.
¿Las sombras afectan al rendimiento?
Las sombras estáticas son baratas. Los radios de desenfoque grandes se vuelven costosos cuando se repintan en cada fotograma, por ejemplo al animar box-shadow al pasar el ratón por encima de muchas tarjetas. El truco habitual es poner la sombra en un pseudoelemento y animar su opacidad, algo que el navegador puede componer en la GPU sin repintar el desenfoque.
Elevación: una escala de sombras coherente
Los sistemas de diseño definen unos pocos niveles de elevación y usan solo esos, para que la “altura” a la que está un elemento signifique algo: tarjetas en el nivel 1, menús desplegables en el 2 o el 3, diálogos en el 4 o el 5. Los presets de elevación de esta herramienta siguen ese patrón, y cada uno combina una sombra ceñida con otra más amplia, que crecen con la altura.
• Nivel 1, tarjetas en reposo y elementos de lista: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24).
• Nivel 2, tarjetas elevadas y elementos al pasar el ratón: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12).
• Nivel 3, menús desplegables y popovers: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1).
• Niveles 4 y 5, modales y diálogos: desplazamientos y desenfoques mayores, siempre por debajo del 20 % de opacidad.
Guarda los niveles como propiedades personalizadas de CSS (--shadow-1 a --shadow-5) o en tu tema de Tailwind en lugar de pegar los valores en los componentes, para poder ajustar la escala en un solo sitio.
Sombras en modo oscuro
Una sombra negra sobre un fondo casi negro es invisible, así que las interfaces oscuras muestran la elevación de otra forma: las superficies más altas reciben colores de fondo algo más claros, y las sombras, si se mantienen, se vuelven más grandes y opacas. Un borde claro sutil de 1px o un brillo interior (inset 0 1px 0 rgba(255,255,255,0.06)) suele funcionar mejor que cualquier sombra exterior. Los resplandores, como el preset Resplandor, funcionan en fondos oscuros porque añaden luz en lugar de quitarla; resérvalos para estados de foco y elementos destacados, no para todas las tarjetas.
Herramientas gratis relacionadas
- Generador de degradados CSS — Crea degradados lineales, radiales y cónicos con paradas de color arrastrables, un selector de ángulo y plantillas. Copia el CSS o una clase de Tailwind.
- Generador de paletas de colores — Pulsa la barra espaciadora para obtener una paleta nueva, bloquea los colores que te gusten, elige una armonía o saca la paleta de una foto. Exporta a CSS, Tailwind, SCSS, JSON o PNG.
- Comprobador de contraste — Comprueba los colores de texto y fondo con WCAG 2.x AA y AAA, consulta el valor Lc de APCA y obtén el color más cercano que cumple.
- Selector y conversor de colores — Captura cualquier color de cualquier parte de tu pantalla o convierte al instante entre HEX, RGB y HSL.