Skip to main content
FreeToolkit .ai

Générateur de dégradés radiaux CSS Créez des dégradés radiaux CSS avec une forme, une position et des couleurs personnalisées.

Générateur de dégradés radiaux illustration
🎨

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

Créez des dégradés radiaux CSS avec une forme, une position et des couleurs personnalisées.

1

Choisissez les couleurs

Définissez la couleur du centre et la couleur de bordure pour le dégradé.

2

Configurez la forme

Sélectionnez une forme circulaire ou elliptique et définissez la position du centre.

3

Copiez le code CSS

Copiez le code CSS généré pour votre projet.

Loading tool...

What Is Générateur de dégradés radiaux?

Un générateur de dégradés radiaux crée des dégradés CSS qui rayonnent à partir d'un point central dans un motif circulaire ou elliptique. Contrairement aux dégradés linéaires qui transitent le long d'une ligne droite, les dégradés radiaux créent des effets de projecteur, des orbites lumineuses et des effets de profondeur couramment utilisés dans la conception Web moderne. Vous pouvez contrôler la forme du dégradé (cercle ou ellipse), la position du centre et les couleurs. Le générateur produit du code CSS radial-gradient() qui fonctionne sur tous les navigateurs modernes. Les dégradés radiaux sont particulièrement efficaces pour créer une profondeur visuelle, des effets de projecteur sur les sections héroïques, des arrières-plans décoratifs et des effets d'éclairage subtils qui rendent les conceptions plates plus dimensionnelles.

Why Use Générateur de dégradés radiaux?

  • Options de formes circulaires et elliptiques pour différents effets
  • Position centrale ajustable avec des curseurs X/Y
  • Mise à jour en temps réel de l'aperçu lors du changement des paramètres
  • Sortie CSS propre et prête pour la production
  • Gratuit à utiliser sans inscription

Common Use Cases

Effets de projecteur

Créez des effets de projecteur pour attirer l'attention sur les sections héroïques ou les images de produits.

Effets de lumière

Générez des fonds d'arrière-plan lumineux pour les cartes, les modales ou les éléments décoratifs.

Profondeur et dimension

Ajoutez une profondeur visuelle aux conceptions plates avec des transitions de couleur radiale subtiles.

Effets de vignette

Créez des vignettes sombres sur les images pour un look cinématique.

Technical Guide

CSS radial-gradient() crée un dégradé rayonnant à partir d'un point. La syntaxe est : radial-gradient(forme à position, couleur1, couleur2). La forme peut être « cercle » (rayon égal dans toutes les directions) ou « ellipse » (rayon correspondant au rapport d'aspect de l'élément). La position utilise des valeurs en pourcentage (50% 50% est le centre). Les mots-clés de taille comme closest-side, farthest-corner contrôlent jusqu'où s'étend le dégradé. Les arrêts de couleur fonctionnent de la même manière que dans les dégradés linéaires. Le navigateur interpole les couleurs du centre vers l'extérieur en cercles ou ellipses concentriques. Les dégradés radiaux sont composable - vous pouvez superposer plusieurs dégradés radiaux à l'aide d'une séparation par virgule dans background-image pour des effets complexes comme plusieurs sources de lumière.

Tips & Best Practices

  • 1
    Utilisez « cercle » pour des dégradés ronds parfaits et « ellipse » pour des formes sensibles au rapport d'aspect
  • 2
    Positionnez le centre hors du centre (par exemple, 30% 30%) pour des effets d'éclairage asymétriques
  • 3
    Superposez plusieurs dégradés radiaux pour des effets complexes à plusieurs sources de lumière
  • 4
    Utilisez la transparence comme couleur de bordure pour des effets de fondu subtils sur les arrière-plans
  • 5
    Combinez avec le mode de mélange d'arrière-plan pour des effets de superposition créatifs

Related Tools

Sélecteur de couleurs - free online tool

Sélecteur de couleurs

Sélecteur de couleurs interactif avec sorties HEX, RGB, HSL et CMYK.

🎨 Color Tools
Générateur de dégradés linéaires - free online tool

Générateur de dégradés linéaires

Créez des dégradés linéaires CSS avec des couleurs personnalisées, un angle et des arrêts de couleur.

🎨 Color Tools
Générateur de dégradés coniques - free online tool

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

Créez des dégradés coniques CSS pour les diagrammes circulaires, les roues de couleurs et les effets balayés.

🎨 Color Tools
Mélangeur de couleurs - free online tool

Mélangeur de couleurs

Mélangez deux couleurs avec un rapport ajustable et voyez le dégradé complet.

🎨 Color Tools
Générateur de filtres CSS - free online tool

Générateur de filtres CSS

Appliquez des effets de filtre CSS tels que le flou, la luminosité, le contraste et bien plus encore avec des commandes visuelles.

🎨 CSS & Design

Frequently Asked Questions

Q Quelle est la différence entre cercle et ellipse ?
Le cercle crée un dégradé parfaitement rond, quelle que soit la dimension de l'élément. L'ellipse s'étend pour correspondre au rapport d'aspect de l'élément, créant une forme ovale dans les éléments non carrés.
Q Puis-je positionner le centre n'importe où ?
Oui, en utilisant les curseurs de position X et Y (0-100%). La valeur par défaut est 50% 50% (centre). Le déplacer crée des effets d'éclairage asymétriques.
Q Le dégradé radial est-il pris en charge dans tous les navigateurs ?
Oui, radial-gradient() est pris en charge dans tous les navigateurs modernes sans préfixe de fournisseur.

About This Tool

Générateur de dégradés radiaux is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.