Saltar al contenido principal
LibraTool logoLibraTool

Generador de sombras de caja CSS gratis

Generador visual para CSS box-shadow con vista previa en vivo, apilamiento de múltiples capas, selector de color, alternancia de inserción y copia con un solo clic. Incluye ajustes preestablecidos de material, neumorfismo y brillo.

Funciona sin conexión una vez cargado
Fondo de vista previa

Arrastra la caja para posicionar la sombra de la capa activa - mantén presionada Mayús para control fino

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Ajustes predefinidos

Usos habituales

  • Sombras de Interfaz de Usuario de TarjetaCrea sombras elegantes de tarjeta para paneles, cuadrículas de productos y paneles de control.
  • Efectos de Presión de BotónCrea sombras de botón que imiten profundidad y estados de presión del mundo real.
  • Interfaz de Usuario Suave NeumorfismoCrea el aspecto de interfaz de usuario suave de neumorfismo con sombras claras + oscuras emparejadas.
  • Sombras de Modal y PopoverCrea la sensación elevada y flotante para diálogos y menús desplegables.
  • Efectos de Resplandor y Anillos de EnfoqueCrea efectos de resplandor, anillos de enfoque y destacados estilo neón.

Cómo funciona

El generador de box-shadow es una herramienta React totalmente del lado del cliente: sin servidor, sin biblioteca. Mantiene una lista de objetos de capas de sombra en el estado, ensambla cadenas CSS box-shadow válidas en cada cambio usando un formateador rgba() escrito a mano, y las aplica directamente a un elemento de vista previa mediante la propiedad style de React para que el propio motor de renderizado del navegador dibuje el resultado al instante.

  1. 1
    Los parámetros de capa alimentan el formateador
    Cada capa de sombra guarda desplazamientos x/y, desenfoque, extensión, un color hexadecimal y un valor de opacidad. En cada cambio, una pequeña función shadowToCss convierte el color hexadecimal a componentes RGB con una expresión regular, y luego ensambla la cadena rgba(), por ejemplo 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Varias capas se unen con comas.
  2. 2
    El navegador renderiza la vista previa en vivo
    La cadena ensamblada se asigna a la propiedad de estilo boxShadow de un elemento div directamente en JSX. React actualiza el atributo del DOM, y el motor CSS del navegador pinta la sombra de inmediato: no interviene canvas ni WebGL, solo renderizado CSS nativo.
  3. 3
    Arrastrar para posicionar usa la Pointer Events API
    Hacer clic y arrastrar el cuadro de vista previa llama a setPointerCapture en el elemento, y luego rastrea los deltas de onPointerMove para actualizar en tiempo real los desplazamientos x e y de la capa activa. Mantener pulsada Mayús aplica un factor de escala de 0,25x para un posicionamiento de precisión.
  4. 4
    La salida se copia al portapapeles
    La herramienta produce dos formatos de salida a partir de los mismos datos de capa: una declaración CSS box-shadow estándar, y una clase de valor arbitrario de Tailwind (shadow-[...]) donde los espacios se sustituyen por guiones bajos según las reglas de sintaxis de Tailwind. Copiar con un clic usa navigator.clipboard.writeText.

Herramientas relacionadas

◖

Generador de radio de borde CSS

Diseñe visualmente esquinas redondeadas con control independiente sobre cada esquina. Admite la sintaxis elíptica X/Y para formas de manchas orgánicas.

Probar
🟦

Generador de CSS Grid

Diseña visualmente una cuadrícula CSS — pistas, unidades y espacios — y copia el CSS e HTML generados.

Probar
↔️

Generador de CSS Flexbox

Experimenta con dirección flex, ajuste, justificación y alineación en elementos en vivo — y copia el CSS.

Probar

Preguntas frecuentes