Générateur CSS
Concevez visuellement dégradés, ombres portées et coins arrondis, et copiez le CSS correspondant.
Générateur CSS - dégradés, ombres portées et coins arrondis
Réglez à l'œil trois des effets CSS les plus utilisés au lieu de tâtonner : les dégradés, les ombres portées et les coins arrondis. Déplacez un curseur ou choisissez une couleur et l'aperçu change aussitôt ; le CSS affiché dessous correspond toujours exactement à l'aperçu, prêt à coller dans une feuille de style.
Le résultat utilise les propriétés standard background, box-shadow et border-radius, prises en charge par tous les navigateurs actuels sans préfixes propriétaires. Rien n'est envoyé nulle part : l'outil s'exécute dans votre navigateur.
Mode d'emploi
- Choisissez Dégradé, Ombre portée ou Coins arrondis.
- Déplacez les curseurs, saisissez des valeurs exactes dans les champs à côté, ou choisissez des couleurs.
- Cliquez sur Aléatoire pour partir d'une proposition, ou sur Réinitialiser pour revenir aux valeurs par défaut.
- Copiez le CSS sous l'aperçu.
Dégradés
Un dégradé est une image dessinée par le navigateur : il se place donc dans background (ou background-image) et s'adapte à n'importe quelle taille sans devenir flou. Trois types sont disponibles :
| Type | Exemple | Rendu |
|---|---|---|
| Linéaire | linear-gradient(135deg, #6c5ce7 0%, #00b894 100%) | Les couleurs changent le long d'une ligne droite, selon l'angle choisi |
| Radial | radial-gradient(circle, #6c5ce7 0%, #00b894 100%) | Les couleurs s'étendent depuis le centre en anneaux |
| Conique | conic-gradient(from 135deg, #6c5ce7 0%, #00b894 100%) | Les couleurs tournent autour du centre, comme une roue chromatique |
Chaque couleur a une position en pourcentage. Deux couleurs à la même position créent une transition nette au lieu d'un fondu : c'est ainsi qu'on dessine des rayures et des diagrammes circulaires en CSS pur. Ajouter une couleur permet d'aller jusqu'à six arrêts, répartis régulièrement ; Retirer une couleur enlève la dernière, jusqu'à un minimum de deux.
En CSS, les angles partent du haut et tournent dans le sens des aiguilles d'une montre : 0deg va vers le haut, 90deg vers la droite et 180deg vers le bas.
Ombres portées
Une ombre portée accepte jusqu'à cinq valeurs : décalage horizontal, décalage vertical, flou, étendue et couleur, plus le mot-clé facultatif inset.
- Horizontal et Vertical déplacent l'ombre ; les valeurs négatives la déplacent vers la gauche ou vers le haut.
- Flou adoucit le bord. 0 donne une ombre nette, comme découpée.
- Étendue agrandit l'ombre avant le flou. Une étendue négative avec un grand flou donne l'effet doux et surélevé courant dans les interfaces modernes.
- Opacité est intégrée à la couleur sous forme de
rgba(), si bien que l'ombre ne masque jamais ce qui se trouve derrière. - Ombre intérieure (inset) la dessine à l'intérieur de la boîte, qui paraît alors enfoncée.
Les ombres discrètes rendent généralement mieux que les ombres marquées : une couleur sombre, légèrement transparente, tirée de votre palette plutôt qu'un noir pur, s'intègre plus naturellement.
Coins arrondis
Avec Même valeur pour tous les coins coché, un seul curseur arrondit les quatre coins. Décochez-le pour régler chaque coin séparément ; le CSS liste alors quatre valeurs dans l'ordre en haut à gauche, en haut à droite, en bas à droite, en bas à gauche.
En pixels, l'arrondi reste le même quelle que soit la taille. En pourcentage, il suit la boîte : border-radius: 50% transforme un carré en cercle et un rectangle en ellipse.
Outils associés
Pour convertir une couleur entre HEX, RGB et HSL, ou en trouver une assez contrastée avec son fond, utilisez le convertisseur de couleurs. Pour mettre en forme ou minifier la feuille de style où vous collez le CSS, utilisez le formateur de code. Les pages dédiées ouvrent cet outil sur un seul effet : générateur de dégradé CSS, générateur de box-shadow et générateur de border-radius.