What types of gradients can I create?

You can create both static gradients (linear and radial) for CSS/PNG export, and fluid animated gradients using Three.js for video export.

Can I export gradients as CSS code?

Yes, static gradients can be exported as CSS, Tailwind CSS, or PNG images. Fluid gradients can be exported as videos or static images.

Yes, all gradient tools are completely free to use with no limitations or registration required.

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

Type

Angle: 90°

0°90°180°270°360°

Instructions rapides

Format de la couleur

Aperçu à la taille d'exportation

Afficher la superposition de la grille (aperçu uniquement)

Utile pour l'alignement pendant l'édition. Les images exportées correspondent toujours aux couleurs visibles.

Largeur

Hauteur

Format

CSS

.gradient {
  background: linear-gradient(90deg, rgba(59, 130, 246, 1) 0%, rgba(139, 92, 246, 1) 50%, rgba(236, 72, 153, 1) 100%);
}

Tailwind CSS

bg-gradient-to-b from-[#3b82f6] via-[#8b5cf6] to-[#ec4899]

1920×1080

0%50%100%

Color

Position: 0%

Opacity: 100%

• Faites glisser les couleurs sur la ligne de temps pour ajuster les positions
• Cliquez sur les couleurs pour les sélectionner et modifier leurs couleurs
• Choisissez parmi des palettes prédéfinies pour des schémas de couleurs rapides
• Ajustez l'angle ou la forme du dégradé dans les Contrôles
• Exportez au format PNG ou copiez le code CSS/Tailwind