Les outils de développeur que vous utilisez chaque jour, tous au même endroit.

Convertisseurs, formateurs, hash, validateurs et les petits utilitaires que vous rouvrez sans cesse restent réunis au lieu de se perdre entre vos onglets.

GitHub

/ Outils

■

/ Chercheur d'outils

109 outils

/ Générateur de dégradé

Type de dégradé

Angle : 90°

0°90°180°270°360°

Arrêts de couleur

100%

Aperçu du dégradé

Code CSS

Valeur de propriété CSS

Image d'arrière-plan

/ Outil sélectionné

■

Générateur de dégradé - outil de génération gratuit

Créer de superbes dégradés CSS avec plusieurs arrêts de couleur

■ 01

Que sont les dégradés CSS ?

Les dégradés CSS créent des transitions douces entre deux couleurs ou plus. Ils peuvent servir d'arrière-plans, de bordures et pour d'autres propriétés. Les dégradés sont rendus par le navigateur et se mettent parfaitement à l'échelle sans pixellisation.

■ 02

Comment ça marche ?

Les dégradés fonctionnent en définissant des points d'arrêt de couleur à des positions précises le long d'un tracé. Les dégradés linéaires font une transition des couleurs le long d'une ligne droite à un angle donné, tandis que les dégradés radiaux partent d'un point central vers l'extérieur en…

■ 03

Exemples de cas

Couvre Dégradé linéaire, Dégradé radial et Dégradé multi-arrêts pour comparer rapidement les entrées et sorties courantes.

/ Outils associés

/ Code

■

Code source de l'outil sélectionné, affiché ici à côté de la version en direct sur la droite.

/ Code source

TypeScript

typescript

// No external dependencies needed - generates CSS gradient strings

interface ColorStop {
  color: string;
  position: number; // 0-100
}

type GradientType = 'linear' | 'radial';

interface GradientOptions {