Générateur CSS box-shadow

Concevez de belles ombres visuellement — faites glisser les curseurs pour le décalage, le flou, l'étendue, la couleur et l'insertion. Empilez plusieurs couches et copiez le CSS prêt en un clic.

Couches
    Aperçu
    Sortie CSS
    
            
            
          
    
        
    
      
    
      
     Fonctionne entièrement dans votre navigateur. Rien n'est téléchargé.
    
    
    

    
    
      
    Comment ça fonctionne
    
      
    
        
    STEP 1
    Ajustez les curseurs
    Réglez le décalage X/Y, le flou, l'étendue, l'opacité et la couleur de la couche d'ombre active. L'aperçu se met à jour en temps réel.
    
        
    STEP 2
    Ajoutez des couches
    Cliquez sur "Ajouter une couche" pour empiler plusieurs ombres. Sélectionnez n'importe quelle couche dans la liste pour la modifier, ou supprimez les couches dont vous n'avez plus besoin.
    
        
    STEP 3
    Copiez le CSS
    Cliquez sur "Copier CSS" pour copier la déclaration complète box-shadow. Collez-la directement dans votre feuille de style.