Quels types de degrades CSS cet outil prend-il en charge ?

Lineaire, radial et conique. Lineaire utilise un angle en degres. Radial choisit cercle ou ellipse plus une position. Conique utilise un angle from et une position.

Comment fonctionnent les stops de couleur ?

Chaque stop est une couleur hex plus une position optionnelle de 0% a 100%. Laissez la position vide pour que le navigateur espace les stops. Il faut au moins deux couleurs valides.

Dois-je copier la regle background complete ou seulement le degrade ?

Utilisez Copier background pour `background: linear-gradient(...);` pret a coller. Utilisez Copier valeur quand vous n'avez besoin que de la fonction, par exemple dans `background-image` ou une custom property.

Puis-je utiliser la transparence ou un hex a 8 chiffres ?

Oui. Entrez #rrggbbaa (ou choisissez une couleur unie et editez l'hex). Les hex invalides sont ignores jusqu'a correction.

Mes donnees quittent-elles l'appareil ?

Non. Le Generateur de Degrades CSS s'execute uniquement dans votre navigateur. Couleurs et reglages ne sont ni envoyes ni stockes sur un serveur.

Outils générateurs

Generateur de Degrades CSS

Creez des degrades CSS pour fonds, boutons et heroes sans quitter le navigateur.

Le CSS du degrade est genere dans votre navigateur. Rien n'est envoye.

Type de degrade

Angle (deg)

0 est en haut, 90 a droite, 180 en bas, 270 a gauche.

Stops de couleur

Couleur du stop 1
Couleur
Position %
Couleur du stop 2
Couleur
Position %

Sortie CSS

background: linear-gradient(135deg, #3b82f6 0%, #ec4899 100%);

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%)

À propos de Generateur de Degrades CSS

Creez des degrades CSS pour fonds, boutons et heroes sans quitter le navigateur. Passez entre lineaire, radial et conique, reglez l'angle ou la position, ajoutez jusqu'a huit stops de couleur et copiez une declaration `background:` prete ou la seule valeur du degrade. Associez-le au Convertisseur HEX vers RGB pour les couleurs ou au Minificateur CSS avant de publier. Rien n'est envoye.

Comment utiliser Generateur de Degrades CSS

Choisissez lineaire, radial ou conique.
Reglez l'angle (lineaire / conique) ou la forme et la position (radial / conique).
Modifiez les stops de couleur - hex et % optionnel - ou ajoutez-en.
Copiez le CSS background ou la valeur du degrade dans votre feuille de style. Tout reste sur votre appareil.

Exemples de Generateur de Degrades CSS

Lavis diagonal de marque

linear-gradient(135deg, #3b82f6 0%, #ec4899 100%) - fond courant pour heroes ou cards.

Spotlight radial doux

radial-gradient(circle at center, #ffffff 0%, #e2e8f0 100%) pour une vignette douce ou un fond de modal.

Roue de couleurs conique

conic-gradient(from 0deg at center, #ff0000 0%, #00ff00 50%, #0000ff 100%) pour graphiques et anneaux decoratifs.

Fondu lineaire a trois stops

Ajoutez un stop du milieu (ex. #22c55e a 50%) entre deux couleurs de marque pour un melange plus riche.

Cas d'utilisation courants

Concevoir des fonds de heroes et sections en CSS
Creer des fonds de boutons et badges multi-stops
Prototyper des spotlights radiaux et vignettes douces
Faire des graphiques coniques ou anneaux decoratifs
Copier des declarations background pretes pour la production

Questions fréquentes sur Generateur de Degrades CSS

Quels types de degrades CSS cet outil prend-il en charge ?: Lineaire, radial et conique. Lineaire utilise un angle en degres. Radial choisit cercle ou ellipse plus une position. Conique utilise un angle from et une position.
Comment fonctionnent les stops de couleur ?: Chaque stop est une couleur hex plus une position optionnelle de 0% a 100%. Laissez la position vide pour que le navigateur espace les stops. Il faut au moins deux couleurs valides.
Dois-je copier la regle background complete ou seulement le degrade ?: Utilisez Copier background pour `background: linear-gradient(...);` pret a coller. Utilisez Copier valeur quand vous n'avez besoin que de la fonction, par exemple dans `background-image` ou une custom property.
Puis-je utiliser la transparence ou un hex a 8 chiffres ?: Oui. Entrez #rrggbbaa (ou choisissez une couleur unie et editez l'hex). Les hex invalides sont ignores jusqu'a correction.
Mes donnees quittent-elles l'appareil ?: Non. Le Generateur de Degrades CSS s'execute uniquement dans votre navigateur. Couleurs et reglages ne sont ni envoyes ni stockes sur un serveur.

Convertisseur HEX en RVB

Convertissez HEX en RVB (et inversement) avec HSL, CMJN, une rampe de teintes, des cartes de contraste WCAG et un extrait de jeton CSS - convertisseur de code couleur en ligne gratuit.

Convertisseur RVB vers HSL

Convertissez RVB en HSL et HSL en RVB instantanément. Convertisseur de couleurs gratuit avec échantillon en direct et CSS rgb() et hsl() prêts à copier.

Convertisseur PX vers REM

Convertissez px en rem et em en ligne avec une taille de police de base configurable. Convertisseur px vers rem gratuit avec tableau de reference rapide. Dans le navigateur.

Minificateur CSS

Minificateur CSS en ligne gratuit. Compressez et réduisez le CSS en supprimant les commentaires et en réduisant les espaces : feuilles de style plus petites, chargements de pages plus rapides. Fonctionne dans votre navigateur, aucun téléchargement requis.