Aller au contenu
arnaud.app

Générateur de dégradés CSS

Construisez des dégradés CSS linéaires et radiaux avec aperçu en direct.

Fonctionne dans votre navigateur

Choisissez linéaire ou radial, glissez le curseur d'angle, modifiez les arrêts avec leur pourcentage. L'aperçu se met à jour et le CSS est à un clic.

background: linear-gradient(135deg, #0a7cff 0%, #a855f7 100%);

Comment l'utiliser

  1. Choisissez linéaire ou radial

    Linéaire a un angle ; radial est centré sur l'élément.

  2. Modifiez les arrêts

    Cliquez un swatch pour la couleur ; saisissez le pourcentage. Ajoutez/retirez via les boutons.

  3. Copiez le CSS

    La déclaration `background:` est prête à coller.

Qu'est-ce que c'est ?

Un générateur de dégradés CSS construit la chaîne linear-gradient(...) ou radial-gradient(...) à partir d'une liste d'arrêts. Chaque arrêt a une couleur et une position ; CSS interpole entre arrêts consécutifs. La sortie est une déclaration `background:` à coller.

Quand l'utiliser

Arrière-plans de hero, surbrillances de boutons, fonds de cartes, séparateurs illustratifs, systèmes de marque cherchant une profondeur subtile sans image, accents en mode sombre.

Erreurs courantes

Trop d'arrêts trop proches - le dégradé paraît chargé. Complémentaires saturés (rouge/vert) à 50 % - milieu perceptuel boueux sauf à ajouter un point neutre. Et oublier un fallback `background-color`.

FAQ

Pourquoi mon dégradé semble banded ?
Les dégradés CSS sont interpolés en sRGB, ce qui peut donner un milieu boueux entre deux couleurs saturées. Utilisez la syntaxe OKLCH (linear-gradient(in oklch, ...)) pour des dégradés perceptuellement uniformes dans les navigateurs récents.

Outils similaires

Convertisseur de couleurs (HEX, RGB, HSL)
Convertissez les couleurs entre HEX, RGB, HSL et OKLCH.
Générateur d'ombre CSS
Empilez plusieurs ombres CSS box-shadow avec préréglages, aperçu en direct et déclaration prête à copier.

Plus dans cette catégorie