Générateur d'ombre portée CSS
Réglez une ombre portée à l'aide de curseurs et copiez le CSS exact, avec aperçu en direct.
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
Comment utiliser Générateur d'ombre portée CSS
- Faites glisser les curseurs de décalage, de flou et d'étalement pour façonner l'ombre.
- Définissez la couleur et l'opacité de l'ombre, et activez l'option intérieure (inset) si besoin.
- Copiez le CSS box-shadow généré dans votre feuille de style.
À propos de Générateur d'ombre portée CSS
Concevez une box-shadow CSS à l'aide de curseurs et copiez la ligne exacte une fois le résultat satisfaisant. Vous contrôlez le décalage horizontal et vertical, qui déplace l'ombre vers la gauche ou la droite et vers le haut ou le bas ; le rayon de flou, qui adoucit son contour ; et l'étalement, qui agrandit ou réduit l'ombre par rapport à la boîte. Un aperçu en direct se met à jour pendant que vous faites glisser les curseurs, afin de voir chaque changement immédiatement.
Pour la couleur, vous choisissez une teinte et réglez séparément un curseur d'opacité, et l'outil combine les deux en une seule valeur rgba(), de sorte qu'une ombre grise douce à 20 % d'opacité paraît naturelle plutôt qu'un bloc uni. Une option intérieure (inset) fait passer l'ombre de l'extérieur de la boîte à son intérieur, ce qui permet de donner à un champ un aspect creusé ou à un bouton un effet enfoncé.
L'aperçu repose sur un fond en damier, et ce n'est pas un hasard : il permet de juger honnêtement une ombre douce et semi-transparente, telle qu'elle apparaîtrait sur une véritable page. Un point à savoir : l'outil génère une seule couche d'ombre, pas plusieurs ombres empilées séparées par des virgules, et l'aperçu montre l'effet sur une boîte simple. Associez-le au générateur de dégradé CSS pour styliser également l'arrière-plan de la boîte.
Questions fréquentes
Que contrôlent le décalage, le flou et l'étalement ?
Le décalage déplace l'ombre horizontalement et verticalement par rapport à la boîte. Le flou adoucit son contour, un flou plus important donnant une ombre plus diffuse. L'étalement modifie la taille de l'ombre, la rendant plus grande ou plus petite que la boîte avant l'application du flou.
Comment la couleur de l'ombre est-elle définie ?
Vous choisissez une couleur et réglez un curseur d'opacité, et l'outil les combine en une seule valeur rgba(). Vous contrôlez ainsi à la fois la teinte et le degré de transparence de l'ombre, ce qui la rend douce et naturelle plutôt qu'un bloc uni.
À quoi sert l'option intérieure (inset) ?
Elle déplace l'ombre à l'intérieur de la boîte plutôt qu'à l'extérieur. Une ombre extérieure donne l'impression que l'élément se détache de la page ; une ombre intérieure lui donne un aspect creusé ou enfoncé, ce qui est utile pour les champs de saisie, les zones en creux et les boutons pressés.
Puis-je créer plusieurs ombres à la fois ?
Non. Cet outil génère une seule couche d'ombre. Le CSS permet bien plusieurs ombres séparées par des virgules sur un même élément, mais il faudrait les combiner vous-même ; le générateur produit une ligne box-shadow propre à la fois.
Pourquoi l'aperçu est-il sur un fond en damier ?
Le damier permet de juger facilement une ombre douce ou semi-transparente, car on voit à quel point l'arrière-plan transparaît. Une ombre qui paraît correcte sur fond blanc peut sembler trop marquée ailleurs, et le motif le révèle.