Aller au contenu principal
ImagesGratuit · 3 utilisations/jourTraité dans votre navigateur

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

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

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%); }

Connexes

Plus dans cette catégorie

Da mesma categoria.

Gratuit · 2 utilisations/jour

Filigrane par lot

Appliquez un logo ou un texte en filigrane sur plusieurs photos à la fois et téléchargez le tout en ZIP.

Gratuit · 3 utilisations/jour

Mood board (planche d'inspiration)

Assemblez des URL d'images, une palette hex et des mots-clés dans une grille visuelle exportable.

Gratuit · 1 utilisation/jour

Suppression d'arrière-plan IA

Détoure l'arrière-plan de la photo avec un modèle d'IA qui s'exécute dans votre navigateur. Fonctionne mieux avec des personnes et des produits au premier plan.

Gratuit · 2 utilisations/jour

Générateur de palettes de couleurs

Saisissez une couleur de base et générez des harmonies (analogues, monochromes, complémentaires).

Gratuit · 3 utilisations/jour

Vérificateur de contraste WCAG

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

Gratuit · 3 utilisations/jour

Visionneuse EXIF

Consultez les métadonnées d'une image : GPS, appareil, date de prise de vue et plus.