Générateur CSS
Dégradés, ombres et arrondis réglés visuellement
Options
Résultat
background: linear-gradient(135deg, #1fa89c 0%, #7c3aed 100%);
Collez la déclaration copiée directement dans votre sélecteur CSS.
La syntaxe des ombres et des dégradés comporte quatre ou cinq nombres dont personne ne peut se représenter l’effet à la lecture. Déplacez les curseurs jusqu’à ce que l’aperçu vous convienne, puis récupérez la règle.
Mode d’emploi
- 1 Choisissez ce que vous voulez construire.
- 2 Ajustez les curseurs et les couleurs en surveillant l’aperçu.
- 3 Copiez le CSS généré.
- 4 Collez-le à l’intérieur de votre sélecteur.
Questions fréquentes
Que signifient les valeurs de box-shadow ?
Décalage horizontal, décalage vertical, flou, étalement, couleur. Le flou adoucit le bord ; l’étalement agrandit ou rétrécit toute l’ombre avant le flou. Un décalage vertical positif avec un flou léger se lit comme une source de lumière située au-dessus.
Comment rendre une ombre naturelle ?
Gardez le décalage horizontal proche de zéro, utilisez un petit décalage vertical positif, et un flou deux à trois fois supérieur à ce décalage. Préférez un noir peu opaque à un gris : les ombres grises paraissent plates sur des fonds colorés.
À quoi sert inset ?
À dessiner l’ombre à l’intérieur de l’élément plutôt qu’à l’extérieur, ce qui donne un effet enfoncé plutôt que surélevé. Utile pour les champs de saisie et les boutons activés.