Générateur d'ombre CSS : aperçu en direct, copier le code

Générateur d'ombre CSS

Ce générateur construit une seule valeur CSS box-shadow à partir de six réglages : décalage horizontal, décalage vertical, rayon de flou, rayon d'extension, une couleur d'ombre avec son propre curseur d'opacité, et un interrupteur inset. Deux autres sélecteurs de couleur définissent la boîte d'aperçu et son arrière-plan, pour que l'ombre reste lisible sur un fond clair ou sombre, et quatre préréglages, soft, hard, glow et inset, chargent une combinaison prête en un clic. Chaque changement met à jour aussitôt la ligne box-shadow sous l'aperçu, prête à copier.

Comment la valeur box-shadow est construite

CSS écrit une ombre selon un ordre fixe : décalage horizontal, décalage vertical, rayon de flou, rayon d'extension, puis une couleur ; le mot inset est ajouté devant pour dessiner l'ombre à l'intérieur du bord de la boîte plutôt que derrière. Le décalage horizontal et vertical déplace l'ombre latéralement ou verticalement, et tous deux acceptent des valeurs négatives jusqu'à -50px, si bien qu'une ombre peut tomber à gauche de la boîte ou se placer au-dessus. Le rayon de flou, de 0 à 100px, adoucit le bord de l'ombre, et le rayon d'extension, de -50 à 50px, agrandit ou réduit l'ombre indépendamment de la taille de la boîte. La valeur hexadécimale du sélecteur de couleur se décompose en ses composantes rouge, vert et bleu, et le curseur d'opacité, de 0 à 1, devient la quatrième valeur à l'intérieur de rgba() ; à 0 l'ombre est totalement transparente, à 1 elle correspond exactement à la couleur choisie.

Exemple chiffré

Avec un décalage horizontal de 5px, un décalage vertical de 5px, un flou de 15px et une extension de 3px, associés à la couleur d'ombre #1d4ed8 et une opacité de 0,3, le résultat est box-shadow: 5px 5px 15px 3px rgba(29, 78, 216, 0.3). Le code hexadécimal #1d4ed8 se décompose en rouge 29, vert 78 et bleu 216, et le 0,3 du curseur d'opacité devient directement la quatrième valeur de rgba(), sans conversion supplémentaire. Activer inset avec les mêmes six valeurs dessine l'ombre identique à l'intérieur du bord de la boîte plutôt que derrière, un effet courant pour les boutons enfoncés ou les champs de saisie creusés.

Code CSS prêt à copier

.carte {
  box-shadow: 5px 5px 15px 3px rgba(29, 78, 216, 0.3);
}