Generador CSS box-shadow

Diseña hermosas sombras visualmente — arrastra controles deslizantes para desplazamiento, desenfoque, expansión, color e inserción. Apila múltiples capas y copia el CSS listo con un clic.

Capas
    Vista previa
    Salida CSS
    
            
            
          
    
        
    
      
    
      
     Funciona completamente en tu navegador. No se sube nada.
    
    
    

    
    
      
    Cómo funciona
    
      
    
        
    STEP 1
    Ajusta los controles
    Ajusta el desplazamiento X/Y, desenfoque, expansión, opacidad y color de la capa de sombra activa. La vista previa se actualiza en tiempo real.
    
        
    STEP 2
    Añade más capas
    Haz clic en "Añadir capa" para apilar múltiples sombras. Selecciona cualquier capa de la lista para editarla o elimina las que ya no necesites.
    
        
    STEP 3
    Copia el CSS
    Haz clic en "Copiar CSS" para copiar la declaración completa de box-shadow. Pégala directamente en tu hoja de estilos.