ToolAtlas
FavorisRécents

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

Traité dans ce navigateur

Limite de texte : 2000000 caractères

Cet outil n’envoie pas votre saisie.

Un hero sans fichier PNG de 400 Ko. Le CSS se met à l’échelle. Un texte blanc sur la zone claire du dégradé échoue souvent au RGAA : mesurez le pire stop.

Un bandeau marketing sans JPEG de dégradé. Le job : background: linear-gradient(...).

Les stops se trient par position. Un angle 180° n’est pas le même qu’un to bottom mal recopié — relisez la déclaration.

Limites

  • Pas un export Figma.
  • Un dégradé complexe à 8 stops peut rester lourd à maintenir.
  • Ombres pour le relief, pas pour le fond.

Comment l’utiliser

  1. Type, angle, couleurs et positions.
  2. Copiez le CSS. Testez le texte par-dessus.
  3. Une teinte de départ : palette.

FAQ

Linéaire ou radial ?

Linéaire : angle en degrés. Radial : cercle (syntaxe simple ici). Pas de conic-gradient si l’UI ne le propose pas.

Harmonie de couleurs ?

Générateur de palettes puis collez les hex en stops.

Contraste du titre sur le hero ?

Contraste entre le texte et le stop le plus proche (souvent trop clair).

Une ombre de carte ?

Ombres.

Le CSS part-il ?

Non. Génération dans l’onglet.

Outils liés