Générateur d'ombre CSS
Crée une ombre box-shadow en CSS avec un aperçu en direct : règle le décalage, le flou, l'étendue, la couleur et l'opacité, puis copie le code. Gratuit et dans ton navigateur.
Cet outil est en train de pousser
On est encore en train de le préparer.
En attendant qu'il pousse, jetez un œil aux outils déjà en place ci-dessous.
À quoi sert cet outil
Générateur d'ombre CSS avec un aperçu en direct. Règle le décalage horizontal et vertical, le flou, l'étendue, la couleur et l'opacité, et passe à une ombre intérieure quand tu en as besoin. La règle box-shadow s'affiche prête à copier et tout se passe dans ton navigateur.
À quoi ça vous sert
- Donner de la profondeur à une carte, un bouton ou une fenêtre modale sur une landing page.
- Créer une ombre douce pour un menu flottant ou une infobulle.
- Faire une ombre intérieure pour qu'un champ ou un encart paraisse en creux.
- Tester l'ombre avant de coller la règle dans ta feuille de style ou ton thème Tailwind.
Comment l'utiliser
- Règle le décalage horizontal et vertical en pixels.
- Ajuste le flou et l'étendue jusqu'à ce que l'ombre te convienne.
- Choisis la couleur de l'ombre et son opacité de 0 à 100.
- Active l'ombre intérieure si tu la veux à l'intérieur, puis copie la règle box-shadow ci-dessous.
Tout le travail se passe dans votre navigateur. Aucun fichier n'est envoyé à un serveur. Voir plus d'outils dans le même champ.
Va bien avec
D'autres outils qu'on utilise souvent dans le même flux.
- Générateur de Dégradés CSS
créer des dégradés CSS
Une fois que vous avez la couleur de base.
- Générateur de border radius CSSNouveau
créer des coins arrondis CSS
Une fois que vous avez la couleur de base.
- Convertisseur de Couleur: HEX, RGB
convertir des couleurs entre HEX, RGB et HSL
Pour choisir les couleurs du dégradé.
- Générateur de Palettes de Couleurs
générer des palettes de couleurs
Pour choisir les couleurs du dégradé.
- Vérifier le Contraste de Couleur (WCAG)
vérifier le contraste de couleur WCAG
Une fois que vous avez la couleur de base.
Autres outils du même champ
DesignGénérateur de Dégradés CSS
Créez des dégradés CSS en ligne avec un aperçu en direct: linéaire, radial et conique. Copiez le code de votre fond, gratuit et sans envoi.
Générateur de Palettes de Couleurs
Générez des palettes harmonieuses à partir de n'importe quelle couleur de base: analogues, complémentaires et plus. Gratuit et prêt à copier.
Convertisseur de Couleur: HEX, RGB
Convertissez des couleurs entre HEX, RGB et HSL en ligne. Collez un format et obtenez les autres au passage. Gratuit et dans votre navigateur.
Vérifier le Contraste de Couleur (WCAG)
Vérifiez le contraste de couleur WCAG entre texte et fond, avec aperçus en direct, verdict réussite ou échec et suggestions accessibles.
Questions fréquentes
Que signifie chaque valeur de box-shadow ?
Les deux premiers nombres sont le décalage horizontal et vertical, le troisième est le rayon de flou et le quatrième l'étendue. La couleur, avec son opacité, donne la teinte de l'ombre. Un flou plus grand adoucit le bord, une étendue positive agrandit l'ombre et une étendue négative la réduit.
Qu'est-ce qu'une ombre intérieure ?
Une ombre intérieure est dessinée à l'intérieur de l'élément plutôt que derrière, donc la boîte semble creusée au lieu d'être surélevée. Active l'option d'ombre intérieure pour passer n'importe quelle ombre dans ce style.
Comment fonctionne l'opacité ?
L'opacité de 0 à 100 est intégrée à la couleur sous forme de valeur alpha rgba, donc 25 correspond à une ombre à 25 pour cent. Les valeurs basses donnent une ombre subtile et réaliste, les valeurs hautes la rendent plus marquée.
Puis-je utiliser le CSS généré tel quel ?
Oui. Le résultat est une déclaration box-shadow complète que tu peux coller directement dans ta feuille de style, dans une variable CSS ou dans une valeur arbitraire Tailwind. Cette version crée une seule ombre ; pour plusieurs couches, copie la règle et ajoute d'autres ombres séparées par des virgules.