Outilis.fr
Mis a jour : avril 2026

Design

Generateur de gradient

Creez des degrades CSS personnalises. Choisissez les couleurs, l'angle, le type. Apercu en direct et code pret a copier.

Apercu

Type de degrade

Couleurs (2 stops)

0%
100%

Code CSS

background: linear-gradient(135deg, #0d4f3c 0%, #e8963e 100%);

Presets

Comment creer un degrade CSS personnalise

Notre generateur de gradient CSS vous permet de creer des degrades lineaires et radiaux visuellement, puis de copier le code CSS pret a integrer dans vos projets web.

  • Choisissez le type : degrade lineaire (avec angle) ou radial (cercle ou ellipse)
  • Ajoutez des color stops : jusqu'a plusieurs couleurs avec position precise en pourcentage
  • Utilisez les presets : 8 degrades predefinies (Coucher de soleil, Ocean, Foret...)
  • Copiez le code CSS : un clic pour copier la propriete background complete

Questions frequentes

Quelle est la difference entre un degrade lineaire et radial ?

Un degrade lineaire suit une direction droite (definie par un angle), tandis qu'un degrade radial part du centre vers l'exterieur en forme de cercle ou d'ellipse. Les degrades lineaires sont plus courants pour les fonds de section, les radiaux pour les boutons et badges.

Le CSS genere est-il compatible avec tous les navigateurs ?

Oui, la syntaxe linear-gradient() et radial-gradient() est supportee par tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Les prefixes vendeurs ne sont plus necessaires.

Combien de color stops puis-je utiliser ?

Il n'y a pas de limite technique. Le CSS supporte autant de color stops que necessaire. En pratique, 2 a 4 couleurs suffisent pour la plupart des designs. Au-dela, le degrade risque de paraitre charge.

Partager