Generador de Box Shadow CSS
Crea sombras CSS en capas con vista previa en vivo
El Generador de Box Shadow CSS funciona por completo en tu navegador. Las capas de sombra y el CSS generado que creas nunca salen de tu dispositivo y no se sube nada a ArrayKit.
Abrir el Generador de CSS Grid
Acerca de Generador de Box Shadow CSS
El Generador de Box Shadow CSS construye una declaración box-shadow permitiéndote apilar cualquier cantidad de capas de sombra, cada una con su propio desplazamiento, difuminado, expansión, color e interruptor de inset. Una vista previa en vivo se actualiza al instante mientras ajustas los valores, para que veas exactamente cómo se ve la sombra antes de copiar el código. Combina una sombra ambiental suave debajo de una sombra de contacto ajustada para lograr profundidad realista, o mezcla una capa inset y otra outset para un efecto de botón presionado. Está pensado para desarrolladores front-end, diseñadores y cualquiera que estilice tarjetas, botones o modales y quiera un valor box-shadow preciso sin ajustar píxeles a mano en una hoja de estilos. Todo funciona localmente en tu navegador: no se sube ningún dato de CSS ni de diseño a ningún lugar.
Características
- Apila capas de sombra ilimitadas, cada una con x, y, difuminado, expansión y color independientes
- Alterna cualquier capa entre una sombra proyectada y una sombra inset
- La vista previa en vivo muestra el efecto combinado de todas las capas mientras editas
- Selector de color más un campo de texto para escribir valores hex, rgb o rgba directamente
- Declaración CSS box-shadow: ...; lista para copiar, generada al instante
- Añade o elimina capas para crear sombras suaves simples o profundidad compleja en capas
- Se admiten valores negativos de expansión y desplazamiento para sombras hacia adentro
- Funciona por completo en tu navegador sin enviar datos de sombra ni de diseño a ninguna parte
Cómo usar Generador de Box Shadow CSS
- Ajusta la x, y, el difuminado y la expansión de la primera capa de sombra
- Elige un color y activa Inset si quieres que la sombra quede dentro del elemento
- Haz clic en Añadir capa para apilar otra sombra y ganar profundidad
- Copia el CSS box-shadow generado desde el panel de código
Ejemplo
Entrada
x0 y4 blur8 rgba(0,0,0,.2)
Salida
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
Una sombra proyectada suave renderizada como una declaración CSS lista para pegar.
Errores comunes y solución de problemas
- El box-shadow se ve demasiado duro o cuadrado en lugar de suave. — Aumenta el valor de difuminado en relación con el desplazamiento; un difuminado mayor con un desplazamiento y moderado produce una sombra más suave y natural.
- Una capa inset no se ve en la caja de vista previa. — Las sombras inset solo aparecen dentro del área de padding del elemento, así que asegúrate de que el desplazamiento y el difuminado de la capa sean lo bastante grandes para verse sobre el fondo de la vista previa.
- Varias capas hacen que el valor de la sombra sea difícil de leer en la hoja de estilos. — Es normal: box-shadow acepta capas separadas por comas, y el Generador de Box Shadow CSS mantiene cada capa en la misma línea por diseño; fórmatealo con un linter si prefieres una capa por línea.
- Un valor de expansión negativo parece reducir la sombra hasta casi desaparecer. — Una expansión negativa contrae los bordes de la sombra antes de aplicar el difuminado, así que combínala con un difuminado mayor para mantenerla visible; esto es habitual en sombras de contacto ajustadas.
Preguntas frecuentes
- ¿Qué produce el Generador de Box Shadow CSS?
- Produce una declaración CSS box-shadow completa construida a partir de una o más capas que configures, cada una con su propio desplazamiento, difuminado, expansión, color y ajuste inset, lista para pegar en una hoja de estilos.
- ¿Puede el Generador de Box Shadow CSS crear varias sombras apiladas?
- Sí. Haz clic en Añadir capa para apilar tantas capas de sombra como necesites; box-shadow en CSS admite capas separadas por comas y la herramienta las une en el orden correcto.
- ¿Qué es un box-shadow inset?
- Un box-shadow inset se renderiza dentro de la caja del elemento en lugar de detrás de ella, útil para efectos de botón presionado o bordes internos sutiles. Activa Inset en cualquier capa para cambiarlo.
- ¿El Generador de Box Shadow CSS admite colores rgba y hex?
- Sí. Escribe cualquier color CSS válido —hex, rgb() o rgba()— en el campo de color de una capa, o usa el selector de color para valores hex; rgba te permite controlar la opacidad de la sombra por separado.
- ¿El Generador de Box Shadow CSS sube mis valores de diseño?
- No. Todas las capas de sombra y el CSS generado permanecen en tu navegador. Ningún dato de tu diseño se sube a ArrayKit ni a ningún servidor.
- ¿Cómo consigo una sombra suave y realista en lugar de un borde duro?
- Usa un valor de difuminado mayor en relación con el desplazamiento y considera combinar una sombra pequeña y ajustada con otra más suave y grande; este enfoque de dos capas imita cómo se ven las sombras con luz real.
Herramientas relacionadas
Todas las herramientas de ArrayKit