Générateur de propriétés CSS

Un générateur de propriétés CSS est un outil qui crée le code CSS d’un effet visuel à partir d’une série de curseurs et de sélecteurs de couleur, au lieu de demander à l’utilisateur de saisir le code à la main. Celui-ci couvre quatre effets : les dégradés, les ombres portées, le rayon de bordure et les ombres de texte. Chaque panneau affiche un aperçu en direct et produit du CSS prêt à être copié.

Ce qu’il génère

• Dégradés : transitions linéaires ou radiales entre deux couleurs
• Ombres portées : ombre portée ou ombre interne autour d’un élément, avec des réglages pour le décalage, le flou, l’étalement, la couleur et l’opacité
• Rayon de bordure : angles arrondis, identiques sur les quatre coins ou définis séparément
• Ombres de texte : ombre derrière le texte, avec des réglages pour le décalage, le flou, la couleur et l’opacité

Chaque réglage met à jour l’aperçu et le CSS généré en même temps. Les modifications peuvent ainsi être vérifiées avant la copie du code.

Comment calculer un dégradé linéaire CSS

Un dégradé linéaire passe d’une couleur à une autre le long d’une ligne droite. Sa syntaxe CSS est la suivante :

1background: linear-gradient(angle, color1 position1%, color2 position2%);
2

L’angle est mesuré en degrés, de 0 à 360. position1 et position2 indiquent l’endroit où chaque couleur atteint son intensité maximale, sous la forme d’un pourcentage de la longueur du dégradé.

Exemple

Les valeurs initiales du générateur sont un angle de 90 degrés, #ff5f6d à 0 % et #ffc371 à 100 %. Le résultat est le suivant :

1background: #ff5f6d;
2background: linear-gradient(90deg, #ff5f6d 0%, #ffc371 100%);
3

La première ligne fournit une couleur de remplacement simple pour les navigateurs qui, pour une raison quelconque, ne parviennent pas à afficher le dégradé. La deuxième ligne correspond au dégradé lui-même.

Formule d’un dégradé radial

Un dégradé radial se diffuse depuis un point central au lieu de suivre une ligne :

1background: radial-gradient(circle, color1 position1%, color2 position2%);
2

Ce générateur produit toujours un dégradé radial circulaire. Il ne propose ni option de forme elliptique ni moyen de déplacer le point central ; seules les deux couleurs et la position de leurs points d’arrêt peuvent être modifiées.

Les deux types de dégradés proposés par cet outil utilisent exactement deux couleurs, définies avec les sélecteurs Couleur 1 et Couleur 2. Il n’est pas possible d’ajouter un troisième point d’arrêt de couleur.

Formule d’une ombre portée CSS

Une ombre portée est une ombre dessinée autour des bords d’un élément :

1box-shadow: h-offset v-offset blur spread color;
2

h-offset et v-offset déplacent l’ombre vers la gauche ou la droite, et vers le haut ou le bas. Les valeurs positives la déplacent vers la droite ou vers le bas ; les valeurs négatives vers la gauche ou vers le haut. blur adoucit le bord de l’ombre ; plus sa valeur est élevée, plus l’adoucissement s’étend. spread agrandit ou réduit la taille de l’ombre avant l’application du flou. L’ajout du mot-clé inset avant les décalages dessine l’ombre à l’intérieur de la bordure de l’élément plutôt qu’à l’extérieur.

Exemple

Avec les réglages par défaut — décalage horizontal de 5px, décalage vertical de 5px, flou de 10px, étalement de 0px, noir avec une opacité de 20 % — l’outil produit :

1box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
2

Le curseur d’opacité du sélecteur de couleur va de 0 à 100 et est converti sur l’échelle de 0 à 1 utilisée par rgba(). Ainsi, 20 % devient 0.2.

Formule du rayon de bordure CSS

Le rayon de bordure arrondit les coins d’un élément. Deux formes existent :

1border-radius: value;                              /* identique aux quatre coins */
2border-radius: top-left top-right bottom-right bottom-left; /* défini séparément */
3

Lorsque les quatre coins partagent une même valeur, le générateur utilise la forme abrégée. Lorsqu’ils diffèrent, il indique les quatre valeurs dans cet ordre précis : coin supérieur gauche, coin supérieur droit, coin inférieur droit, puis coin inférieur gauche.

Exemple

Le rayon par défaut est de 10px pour chaque coin :

1border-radius: 10px;
2

Une image d’avatar circulaire utilise généralement border-radius: 50% à la place. Cette valeur se situe toutefois en dehors de la plage autorisée par le curseur du générateur, qui va de 0 à 100 pixels.

Formule d’une ombre de texte CSS

Une ombre de texte fonctionne comme une ombre portée, mais elle ne possède pas de valeur d’étalement et s’applique aux lettres plutôt qu’au cadre d’un élément :

1text-shadow: h-offset v-offset blur color;
2

Exemple

Avec les réglages par défaut — décalage horizontal de 2px, décalage vertical de 2px, flou de 3px, noir avec une opacité de 50 % :

1text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
2

Quels codes couleur le générateur accepte-t-il ?

Chaque contrôle de couleur possède un échantillon et une zone de texte. Cette zone accepte un code couleur hexadécimal, c’est-à-dire la forme avec # utilisée dans tout le CSS. Quatre longueurs sont valides : trois chiffres (#f00), quatre chiffres (#f00c), six chiffres (#ff0000) et huit chiffres (#ff0000cc). Les formes courtes représentent la même couleur que les formes longues, car chaque chiffre est doublé : #123 correspond à la même couleur que #112233.

Le dernier chiffre de la forme à quatre chiffres et la dernière paire de la forme à huit chiffres définissent la transparence. Les générateurs d’ombres ignorent ces chiffres et prennent la valeur alpha du curseur Opacité. Le curseur indique donc toujours la transparence réellement appliquée. Si la zone de texte contient autre chose qu’une couleur hexadécimale, par exemple un code saisi partiellement, l’ombre utilise le noir par défaut au lieu de produire une déclaration incorrecte.

Comment utiliser le générateur de propriétés CSS

1. Choisir un onglet : Dégradé, Ombre portée, Rayon de bordure ou Ombre de texte.
2. Régler les curseurs, les sélecteurs de couleur et les cases à cocher. Chaque curseur possède une zone numérique adjacente permettant de saisir une valeur exacte. Le panneau d’aperçu et le code CSS sont mis à jour immédiatement.
3. Sélectionner le bouton « Copier dans le presse-papiers », puis coller le code dans une feuille de style ou un attribut style.
4. Sélectionner « Réinitialiser » pour rétablir la valeur initiale de chaque champ des quatre onglets. Cette action réactive également l’onglet Dégradé, même si un autre onglet était affiché.

Questions fréquentes

À quoi sert un générateur de propriétés CSS ?

Il transforme les valeurs saisies avec des curseurs et des sélecteurs de couleur en code CSS complet pour les dégradés, les ombres et les coins arrondis. La personne qui l’utilise n’a donc pas besoin d’écrire ou de mémoriser cette syntaxe.

Quelle est la différence entre un dégradé linéaire et un dégradé radial ?

Un dégradé linéaire change de couleur le long d’une ligne droite selon un angle défini. Un dégradé radial change de couleur en se diffusant depuis un point central. L’option radiale de cet outil utilise toujours une forme circulaire.

Cet outil peut-il créer un dégradé de plus de deux couleurs ?

Non. Les panneaux de dégradé linéaire et de dégradé radial prennent exactement deux couleurs, Couleur 1 et Couleur 2, chacune avec sa propre position de point d’arrêt.

Quelle est la différence entre une ombre portée interne et une ombre ordinaire ?

Une ombre portée ordinaire se trouve à l’extérieur des bords de l’élément, comme une ombre projetée derrière celui-ci. Une ombre interne se trouve à l’intérieur des bords, ce qui donne à l’élément un aspect enfoncé plutôt que surélevé.

Pourquoi les valeurs des coins arrondis apparaissent-elles dans l’ordre supérieur gauche, supérieur droit, inférieur droit, inférieur gauche ?

C’est l’ordre attendu par la propriété CSS border-radius lorsque quatre valeurs distinctes sont écrites : il suit le sens des aiguilles d’une montre à partir du coin supérieur gauche.

Le CSS généré fonctionne-t-il dans tous les navigateurs ?

Les dégradés, les ombres portées, le rayon de bordure et les ombres de texte sont pris en charge par les versions actuelles de Chrome, Firefox, Safari et Edge. Aucun préfixe propre à un éditeur n’est ajouté au résultat.

Références

1. MDN Web Docs : Utiliser les dégradés CSS
2. MDN Web Docs : box-shadow
3. MDN Web Docs : border-radius
4. MDN Web Docs : text-shadow