What types of gradients can I create?

You can create linear gradients (colour transitions in a straight line at any angle) and radial gradients (colour transitions from a central point outward in a circular or elliptical pattern).

Can I download the gradient as an image?

Yes. You can export the gradient as a PNG or JPEG image file to use as a background or design element.

Can I get the CSS code for the gradient?

Yes. The tool generates the corresponding CSS gradient code so you can copy it directly into your stylesheet for use in web projects.

Image Gradient Generator

Create beautiful gradient backgrounds for your projects.

Type de dégradé

Direction

Width (px)

Height (px)

Arrêts de couleur

100%

Code CSS

background: ;

800 × 600

À propos

Notre générateur de dégradés CSS gratuit vous permet de créer de belles transitions de couleurs pour vos sites web, applications et projets de design. Construisez des dégradés linéaires, radiaux et coniques avec jusqu'à 10 arrêts de couleur, prévisualisez-les en temps réel et copiez instantanément le code CSS ou téléchargez en PNG, JPEG ou WebP.

Comment utiliser

Choisissez un type de dégradé — linéaire, radial ou conique
Définissez la direction — choisissez parmi 8 directions pour les dégradés linéaires
Ajoutez des arrêts de couleur — cliquez sur " Ajouter Couleur " pour jusqu'à 10 arrêts
Affinez les positions — faites glisser les curseurs pour positionner précisément chaque arrêt de couleur
Copiez le CSS ou téléchargez — récupérez le code ou exportez en fichier image

Questions fréquentes

Related Tools

Image Blur

Add blur effect to your images

Brightness

Adjust image brightness

Contrast

Adjust image contrast

Crop Image

Crop images to desired size

Resize Image

Resize images to any dimension with precise control over width, height, and aspect ratio for web, social media, and print

Bulk Resize Image

Resize multiple images at once with consistent dimensions for batch processing, web optimization, and social media preparation

Image Gradient Generator

Arrêts de couleur

À propos

Comment utiliser

Questions fréquentes

Qu'est-ce qu'un dégradé CSS ?

Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?

Comment utiliser le code CSS généré ?

Puis-je utiliser plus de deux couleurs ?

Quel format d'image devrais-je télécharger ?

Les dégradés CSS sont-ils meilleurs que les images de dégradé ?

Les dégradés CSS fonctionnent-ils dans tous les navigateurs ?

Related Tools

Image Gradient Generator

Arrêts de couleur

À propos

Comment utiliser

Questions fréquentes

Qu'est-ce qu'un dégradé CSS ?

Quelle est la différence entre les dégradés linéaires, radiaux et coniques ?

Comment utiliser le code CSS généré ?

Puis-je utiliser plus de deux couleurs ?

Quel format d'image devrais-je télécharger ?

Les dégradés CSS sont-ils meilleurs que les images de dégradé ?

Les dégradés CSS fonctionnent-ils dans tous les navigateurs ?

Related Tools