Aller au contenu principal
ImagesProcessado no seu navegador

Générateur de dégradé CSS

Créez visuellement des dégradés linéaires, radiaux et coniques et exportez-les instantanément au format CSS ou Tailwind.

0 sur 3 utilisations aujourd'hui · 3 restantes. Passez à Pro et supprimez la limite.

Mettre à niveau
Type
linear
Points
3/8
Export
CSS + Tailwind
Mesh
Mesh actif
01

Prévisualisation et code

Couleurs de base
Couleur 01
#8C6A2D
Base initiale du dégradé.
Couleur 02
#D3B06F
Base finale du dégradé.
CSS
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
Tailwind
bg-[radial-gradient(circle_at_28%_24%,_rgba(243,_223,_178,_0.2)_0%,_rgba(243,_223,_178,_0)_34%),_radial-gradient(circle_at_78%_68%,_rgba(192,_141,_59,_0.18)_0%,_rgba(192,_141,_59,_0)_42%),_linear-gradient(135deg,_#8C6A2D_0%,_rgba(211,_176,_111,_0.96)_52%,_#2B1D08_100%)]
02

Points et composition

Points de couleur
#8C6A2D
0% · 100%
Position
Opacité
#D3B06F
52% · 96%
Position
Opacité
#2B1D08
100% · 100%
Position
Opacité
03

Géométrie

Type et direction
Type
Angle
135°
Centre et options
Centre X
50%
Centre Y
50%
Répétition
Cadence utile pour séparateurs, trames et lignes produit.
04

Exports avancés

Superposition de mesh
Superposition pour hero visuel et surfaces avec profondeur.
2 couches
background: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%);
Pack de tokens
CSV avec Hero, Surface et Accent prêts pour l'implémentation.
:root { --gradient-stop-1: #8C6A2D; --gradient-stop-2: #D3B06F; --gradient-stop-3: #2B1D08; --gradient-css: radial-gradient(circle at 28% 24%, rgba(243, 223, 178, 0.2) 0%, rgba(243, 223, 178, 0) 34%), radial-gradient(circle at 78% 68%, rgba(192, 141, 59, 0.18) 0%, rgba(192, 141, 59, 0) 42%), linear-gradient(135deg, #8C6A2D 0%, rgba(211, 176, 111, 0.96) 52%, #2B1D08 100%); }

§ Comment utiliser

Comment générer un dégradé CSS visuellement

Créez des dégradés linéaires, radiaux ou coniques avec un aperçu en direct et exportez du CSS prêt à coller.

  1. Choisissez le type de dégradé

    Linéaire (le plus courant, transitions directionnelles), Radial (du centre vers l'extérieur) ou Conique (en arc — idéal pour les graphiques).

  2. Définissez couleurs et arrêts

    Ajoutez deux couleurs ou plus. Glissez pour changer la position de chaque arrêt. Couleurs en HEX, RGB ou HSL.

  3. Ajustez l'angle ou le centre

    Linéaire : 0deg (vertical), 90deg (horizontal), 45deg (diagonale). Radial : définissez l'origine en pixels ou en %.

  4. Copiez le CSS

    Code prêt à coller dans votre feuille de style, avec préfixes -webkit/-moz pour une compatibilité maximale.

Connexes

Outils similaires

Da mesma categoria.

Pro

Filigrane par lots

Accélérez les téléchargements de biens immobiliers en appliquant des filigranes, des logos et des licences jusqu'à 50 photos à la fois. Zippez.

Gratuit

Mood Board

Combinez URLs d'images, palette hex et mots-clés dans une grille visuelle exportable.

Max

Suppresseur d'arrière-plan IA

Intelligence artificielle qui découpe et supprime parfaitement l'arrière-plan de n'importe quelle image.

Pro

Palette de couleurs magique

Entrez une couleur de base et générez instantanément des schémas harmonieux (analogue, monochromatique, complémentaire).

Gratuit

Vérificateur de Contraste WCAG

Vérifiez le contraste des couleurs et la conformité WCAG AA/AAA avec aperçu et export.

Gratuit

Visionneuse EXIF

Visualisez les métadonnées d'image : GPS, appareil, date de capture, etc.