Ir para o conteúdo principal
Images

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

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

Dégradé CSSLinéaire, radial et coniqueTraitement local

Ajustez la direction, répartissez les points de couleur et déployez un dégradé prêt pour le produit, la landing ou le design system.

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

Qu'est-ce que le Générateur de Dégradés CSS ?

Por Quorify EditorialAtualizado em

L'outil Générateur de Dégradés CSS de Quorify crée visuellement des dégradés linéaires, radiaux et coniques et les exporte instantanément en CSS ou Tailwind. Le traitement s'effectue localement dans votre navigateur via l'API Canvas et les formats standardisés — utile lorsque vous manipulez des images sensibles (passeport, contrat, capture d'écran interne) et préférez ne pas les téléverser sur un serveur externe. Il prend en charge les formats modernes (JPEG, PNG, WebP, AVIF) conformes aux normes ISO/IEC. Fait partie du kit image de Quorify — combinez-le avec d'autres outils de compression, conversion et édition visuelle. Pour les détails sur le traitement des données, consultez notre Politique de Confidentialité.

Casos

Quand l'utiliser

  1. Préparer une image avant le téléversement sur un site web, e-commerce ou réseau social.

  2. Accélérer le travail de designer freelance avec des tâches répétitives (redimensionnement par lot, conversion de format).

  3. Éditer des captures d'écran pour documentation technique ou tutoriels sans ouvrir un éditeur lourd.

  4. Préparer du matériel marketing — bannière, post, miniature — en format optimisé.

  5. Résoudre une tâche rapide sans avoir besoin d'installer Photoshop ou similaire.

Método

Comment ça marche

Le Générateur de Dégradés CSS utilise l'API Canvas et les codecs d'image natifs du navigateur, qui implémentent les normes ISO/IEC pour JPEG, PNG, WebP et AVIF. Le traitement est local — l'image n'est pas envoyée à un serveur externe. Pour les détails complets sur le traitement des données, consultez notre Politique de Confidentialité.

FAQ

Questions fréquentes

L'image est-elle envoyée à un serveur ?
Non. Le Générateur de Dégradés CSS traite l'image localement dans le navigateur via l'API Canvas. Pour les détails complets sur le traitement des données, consultez notre Politique de Confidentialité.
Quels formats sont pris en charge ?
Les principaux formats web (JPEG, PNG, WebP, AVIF). Le support des formats anciens (BMP, TIFF) peut varier selon le navigateur.
Y a-t-il une limite de taille ?
Le traitement dépend de la mémoire du navigateur. Les images très volumineuses (au-dessus de 50 Mo) peuvent ralentir la page. Nous recommandons de compresser d'abord si nécessaire.
La qualité est-elle préservée ?
Les conversions sans perte préservent la qualité complète. Les conversions compressées (JPEG, WebP) suivent le niveau choisi — il y a toujours un compromis entre taille et qualité.
Ça marche sur mobile ?
Oui, dans les navigateurs modernes. Les images très volumineuses peuvent être limitées par la mémoire du mobile.
Puis-je traiter plusieurs images ?
Certains outils prennent en charge le traitement par lot. Consultez l'interface de l'outil spécifique pour confirmation.
Fontes

Sources officielles

Tabelas, leis e referências consultadas para fundamentar esta ferramenta.

  1. Standards internationauxISO/IEC série 14496/15444ISO/IEC JTC1 SC29

    Image and Video Format Specifications

    Standards internationaux pour l'encodage et l'échange d'images (JPEG, PNG, WebP, AVIF) et vidéo — référence utilisée par les navigateurs et logiciels d'édition.

    Consultar fonte oficial
  2. Documentation officielleEn vigueurGoogle Web Dev

    Web Image Best Practices

    Recommandations de Google sur l'optimisation d'image pour le web — formats modernes, lazy loading, dimensionnement et impact sur les Core Web Vitals.

    Consultar fonte oficial
  3. Standard de l'industrieExif 2.32CIPA · Camera & Imaging Products Association

    Exif Specification

    Standard de métadonnées Exif (Exchangeable Image File Format) utilisé par les appareils photo numériques et smartphones pour stocker les informations de capture.

    Consultar fonte oficial

Metodologia — esta ferramenta consulta as tabelas e legislação vigentes nas fontes acima. As regras são atualizadas conforme novas instruções normativas são publicadas pelos órgãos competentes.

Última verificação editorial: junho de 2026.

SponsoriséQuorify · forfait gratuit
Quorify Pro

Utilisez Quorify sans limites

100 utilisations/jour sur les 125 outils · sans publicité · historique illimité

À partir de$4.08/mo
Voir les forfaits
Compartilhe
SponsoriséQuorify · forfait gratuit
Quorify Pro

Utilisez Quorify sans limites

100 utilisations/jour sur les 125 outils · sans publicité · historique illimité

À partir de$4.08/mo
Voir les forfaits

Connexes

Outils similaires

toolLayout.related_description

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

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.

Pro

Convertisseur d'images

Redimensionnez et convertissez les images globalement sans perte de qualité.

Max

Compresseur d'images

Réduisez brutalement le poids de vos images en préservant la qualité visuelle.

Pro

Redimensionneur exact

Ajustez la largeur ou la hauteur exacte des pixels de n’importe quelle image.

Pro

Redimensionneur d'images en masse

Convertissez et redimensionnez des dizaines d'images simultanément directement dans votre navigateur avec une confidentialité à 100 %.