Que produit le Générateur de Box Shadow CSS ?

Il produit une déclaration CSS box-shadow complète construite à partir d'une ou plusieurs couches que vous configurez, chacune avec son propre décalage, flou, étalement, couleur et réglage inset, prête à coller dans une feuille de style.

Le Générateur de Box Shadow CSS peut-il créer plusieurs ombres empilées ?

Oui. Cliquez sur Ajouter une couche pour empiler autant de couches d'ombre que nécessaire — box-shadow en CSS prend en charge les couches séparées par des virgules, et l'outil les assemble dans le bon ordre.

Qu'est-ce qu'un box-shadow inset ?

Un box-shadow inset se rend à l'intérieur de la boîte de l'élément plutôt que derrière elle, utile pour des effets de bouton enfoncé ou des bordures internes subtiles. Activez Inset sur n'importe quelle couche pour basculer.

Le Générateur de Box Shadow CSS prend-il en charge les couleurs rgba et hex ?

Oui. Saisissez n'importe quelle couleur CSS valide — hex, rgb() ou rgba() — dans le champ couleur d'une couche, ou utilisez le sélecteur de couleur pour les valeurs hex ; rgba permet de contrôler l'opacité de l'ombre séparément.

Le Générateur de Box Shadow CSS envoie-t-il mes valeurs de design ?

Non. Toutes les couches d'ombre et le CSS généré restent dans votre navigateur. Aucune donnée de votre design n'est envoyée à ArrayKit ni à un quelconque serveur.

Comment obtenir une ombre douce et réaliste plutôt qu'un bord dur ?

Utilisez une valeur de flou plus importante par rapport au décalage, et envisagez de superposer une petite ombre serrée à une plus grande, plus douce — cette approche à deux couches imite l'apparence des ombres sous un éclairage réel.

Générateur de Box Shadow CSS

Créez des ombres CSS en couches avec aperçu en direct

Le Générateur de Box Shadow CSS fonctionne entièrement dans votre navigateur. Les couches d'ombre et le CSS généré que vous créez ne quittent jamais votre appareil et rien n'est envoyé à ArrayKit.

Ouvrir le Générateur de CSS Grid

À propos de Générateur de Box Shadow CSS

Le Générateur de Box Shadow CSS construit une déclaration box-shadow en vous permettant d'empiler autant de couches d'ombre que vous voulez, chacune avec son propre décalage, flou, étalement, couleur et bascule inset. Un aperçu en direct se met à jour instantanément pendant que vous ajustez les valeurs, pour que vous voyiez exactement l'effet avant de copier le code. Superposez une ombre ambiante douce sous une ombre de contact serrée pour une profondeur réaliste, ou combinez une couche inset et une couche outset pour un effet de bouton enfoncé. Il est conçu pour les développeurs front-end, les designers et toute personne qui stylise des cartes, boutons ou fenêtres modales et souhaite une valeur box-shadow précise sans ajuster les décalages en pixels à la main dans une feuille de style. Tout se déroule localement dans votre navigateur — aucune donnée de CSS ou de design n'est envoyée où que ce soit.

Fonctionnalités

Empilez un nombre illimité de couches d'ombre, chacune avec x, y, flou, étalement et couleur indépendants
Basculez n'importe quelle couche entre une ombre portée et une ombre inset
L'aperçu en direct montre l'effet combiné de toutes les couches pendant l'édition
Sélecteur de couleur plus un champ texte pour saisir directement des valeurs hex, rgb ou rgba
Déclaration CSS box-shadow: ...; prête à copier, générée instantanément
Ajoutez ou supprimez des couches pour créer des ombres douces simples ou une profondeur complexe en couches
Les valeurs négatives d'étalement et de décalage sont prises en charge pour les ombres rentrées
Fonctionne entièrement dans votre navigateur sans envoyer de données d'ombre ou de design où que ce soit

Comment utiliser Générateur de Box Shadow CSS

Ajustez le x, le y, le flou et l'étalement de la première couche d'ombre
Choisissez une couleur et activez Inset si vous voulez que l'ombre soit à l'intérieur de l'élément
Cliquez sur Ajouter une couche pour empiler une autre ombre et gagner en profondeur
Copiez le CSS box-shadow généré depuis le panneau de code

Exemple

Entrée

x0 y4 blur8 rgba(0,0,0,.2)

Sortie

box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);

Une ombre portée douce rendue sous forme de déclaration CSS prête à coller.

Erreurs courantes et dépannage

Le box-shadow paraît trop dur ou anguleux au lieu d'être doux. — Augmentez la valeur de flou par rapport au décalage — un flou plus important avec un décalage y modéré produit une ombre plus douce et plus naturelle.
Une couche inset n'est pas visible sur la boîte d'aperçu. — Les ombres inset n'apparaissent qu'à l'intérieur de la zone de padding de l'élément, assurez-vous donc que le décalage et le flou de la couche sont assez grands pour être visibles sur le fond de l'aperçu.
Plusieurs couches rendent la valeur de l'ombre difficile à lire dans la feuille de style. — C'est normal — box-shadow accepte des couches séparées par des virgules, et le Générateur de Box Shadow CSS garde volontairement chaque couche sur la même ligne ; formatez avec un linter si vous préférez une couche par ligne.
Une valeur d'étalement négative semble réduire l'ombre à presque rien. — Un étalement négatif ramène les bords de l'ombre vers l'intérieur avant l'application du flou, associez-le donc à un flou plus important pour garder l'ombre visible — c'est courant pour les ombres de contact serrées.

Foire aux questions

Que produit le Générateur de Box Shadow CSS ?: Il produit une déclaration CSS box-shadow complète construite à partir d'une ou plusieurs couches que vous configurez, chacune avec son propre décalage, flou, étalement, couleur et réglage inset, prête à coller dans une feuille de style.
Le Générateur de Box Shadow CSS peut-il créer plusieurs ombres empilées ?: Oui. Cliquez sur Ajouter une couche pour empiler autant de couches d'ombre que nécessaire — box-shadow en CSS prend en charge les couches séparées par des virgules, et l'outil les assemble dans le bon ordre.
Qu'est-ce qu'un box-shadow inset ?: Un box-shadow inset se rend à l'intérieur de la boîte de l'élément plutôt que derrière elle, utile pour des effets de bouton enfoncé ou des bordures internes subtiles. Activez Inset sur n'importe quelle couche pour basculer.
Le Générateur de Box Shadow CSS prend-il en charge les couleurs rgba et hex ?: Oui. Saisissez n'importe quelle couleur CSS valide — hex, rgb() ou rgba() — dans le champ couleur d'une couche, ou utilisez le sélecteur de couleur pour les valeurs hex ; rgba permet de contrôler l'opacité de l'ombre séparément.
Le Générateur de Box Shadow CSS envoie-t-il mes valeurs de design ?: Non. Toutes les couches d'ombre et le CSS généré restent dans votre navigateur. Aucune donnée de votre design n'est envoyée à ArrayKit ni à un quelconque serveur.
Comment obtenir une ombre douce et réaliste plutôt qu'un bord dur ?: Utilisez une valeur de flou plus importante par rapport au décalage, et envisagez de superposer une petite ombre serrée à une plus grande, plus douce — cette approche à deux couches imite l'apparence des ombres sous un éclairage réel.

Outils associés

Générateur de Border Radius — Créez du border-radius CSS simple, par coin ou en blob avec aperçu en direct
Générateur de Dégradé CSS — Créez des dégradés linéaires, radiaux et coniques avec des points de couleur en direct.
Générateur cubic-bezier — Façonne une courbe d’accélération CSS cubic-bezier() en faisant glisser deux points, avec aperçu en direct.
Générateur CSS Grid — Construit une grille CSS visuellement et copie le grid-template avec les placements, dans votre navigateur.
Calculateur CSS clamp — Transforme une taille min/max et deux largeurs de fenêtre en une valeur clamp() fluide, localement.
Générateur de couleurs Tailwind — Transforme une couleur de marque en échelle Tailwind 50-950 en OKLCH avec contraste WCAG par nuance.