Qu'est-ce que Générateur d'ombre de boîte CSS ?
Générateur d'ombre de boîte CSS gratuit en ligne. Ajustez le décalage, le flou, la propagation et la couleur avec des contrôles visuels et générez instantanément du code CSS.
La propriété CSS box-shadow est l'un des outils les plus polyvalents de la boîte à outils d'un concepteur web, capable d'ajouter de la profondeur, de la hiérarchie et de l'intérêt visuel aux éléments d'interface. CSS Box Shadow Generator fournit une interface visuelle pour créer du code CSS box-shadow, avec un contrôle total sur chaque paramètre et un aperçu interactif qui se met à jour en temps réel.
Le générateur expose cinq paramètres ajustables via des curseurs. Le décalage X déplace l'ombre horizontalement (les valeurs positives déplacent à droite, les valeurs négatives à gauche). Le décalage Y déplace l'ombre verticalement (les valeurs positives déplacent vers le bas, les valeurs négatives vers le haut). Le rayon de flou contrôle la douceur des bords de l'ombre — zéro produit une ombre portée nette, tandis que des valeurs plus élevées créent un effet plus doux et plus diffus. Le rayon d'étalement agrandit ou réduit la taille de l'ombre sans affecter le flou. Le sélecteur de couleur définit la couleur de l'ombre avec un contrôle de l'opacité via le canal alpha.
Une carte d'aperçu en direct montre immédiatement l'effet de chaque ajustement. La carte d'aperçu est stylée avec un fond blanc et des coins arrondis pour simuler un véritable composant d'interface, afin que vous puissiez voir exactement à quoi ressemblera l'ombre sur vos éléments d'interface réels. Six ombres prédéfinies sont incluses pour une sélection rapide : subtile, moyenne, prononcée, floue, interne et surélevée.
Le code CSS box-shadow généré est affiché dans un format prêt à copier. La sortie prend en charge la syntaxe abrégée complète, y compris le mot-clé inset pour les ombres internes. Plusieurs valeurs box-shadow peuvent être combinées en copiant la sortie et en collant manuellement plusieurs déclarations. L'outil valide également que la syntaxe est correcte, de sorte que chaque copie est une déclaration CSS valide.