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.

Crea gradientes lineales o radiales y expórtalos como CSS, Tailwind o PNG.

Tipo

Ángulo: 90°

0°90°180°270°360°

Instrucciones rápidas

Formato de Color

Vista previa al tamaño de exportación

Mostrar superposición de cuadrícula (solo vista previa)

Útil para la alineación al editar. Las imágenes exportadas siempre coinciden con los colores visibles.

Ancho

Altura

Formato

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%

• Arrastra los puntos de color en la línea de tiempo para ajustar las posiciones
• Haz clic en los puntos para seleccionarlos y editar sus colores
• Elige entre paletas predefinidas para esquemas de color rápidos
• Ajusta el ángulo o la forma del degradado en Controles
• Exporta como imagen PNG o copia el código CSS/Tailwind