Générateur CSS Box Shadow

Générez visuellement des propriétés CSS box-shadow avec des curseurs. Visualisez un aperçu en direct et copiez le code CSS prêt à l'emploi en un clic.

Studio · environnement neutre
0px
8px
24px
-6px
14%

  




  


  
  

  
  
  
  

    
Fonctionnalités

    

      
      

        
        Slider controls
      

      
      

        
        Color picker
      

      
      

        
        Inset toggle
      

      
      

        
        Multiple layers
      

      
      

        
        Live preview & CSS code
      

      
    

  

  

  
  

    
Comment Utiliser

    

      
        
        
1. Modelez l'ombre avec les curseurs — la carte neutre de la surface montre exactement le rendu final.

        
        
2. Les vraies ombres sont en couches : empilez jusqu'à quatre calques ou partez d'un préréglage (Soft, Elevated, Floating, Inner).

        
        
3. Changez la surface pour vérifier l'ombre sur blanc, gris et sombre, puis copiez le CSS.

        
      
    

  


  
  
  
  

    
Questions Fréquentes

    
    

      What is box-shadow?
      
The CSS box-shadow property adds shadow effects around an element's frame.

    

    
  

  

  
  
  

    
Outils Associés

    

      
      
        

          
        

        
Générateur de Dégradés CSS

        
Créez visuellement des dégradés CSS linéaires, radiaux et coniques. Ajoutez plus...

      
      
      
        

          
        

        
Générateur CSS Border Radius

        
Créez visuellement des propriétés CSS border-radius — contrôlez les quatre coins...

      
      
      
        

          
        

        
Terrain de Jeu CSS Flexbox

        
Apprenez et expérimentez avec CSS Flexbox. Ajustez les propriétés du conteneur e...

      
      
      
        

          
        

        
Générateur CSS Grid

        
Créez visuellement des mises en page CSS Grid. Définissez les lignes, colonnes e...