Tout s'exécute localement dans votre navigateur. Rien n'est envoyé.

Générateur d'ombres CSS

Utilisez cet outil pour créer des ombres CSS empilées avec aperçu. Les résultats se mettent à jour instantanément et restent sur votre appareil.

Tout s'exécute localement dans votre navigateur. Rien n'est envoyé.

Créer des ombres CSS empilées

Élément 1

Aperçu de l'ombre

Générateur d'ombres CSS

Utilisez cet outil pour créer des ombres CSS empilées avec aperçu.

Le traitement se fait en JavaScript dans le navigateur, ce qui permet de tester des données privées sans les envoyer à un service externe.

Comment utiliser cet outil

  1. Ajuster la première ombre

    Définissez les options décalage x, décalage y, flou, propagation, couleur, alpha et inset.

  2. Empilez plus d'ombres

    Ajoutez des ombres supplémentaires et réorganisez-les pour créer une profondeur superposée.

  3. Copiez le CSS

    Prévisualisez le résultat et copiez la déclaration box-shadow générée dans votre feuille de style.

FAQ

Ce générateur d'ombres de boîte envoie-t-il quelque chose ?

Non. Le CSS est généré localement dans votre navigateur.

Puis-je créer plusieurs ombres ?

Oui. Ajoutez des ombres empilées et réorganisez-les avant de copier le CSS final.

Est-ce qu'il prend en charge les ombres inset ?

Oui. Chaque ombre a sa propre bascule inset.

Quel CSS produit-il ?

Le résultat est une déclaration box-shadow qui peut être collée dans CSS.