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 degradados lineales o radiales y expórtalos como CSS, Tailwind o PNG.

Tipo

Ángulo: 90°

0°90°180°270°360°

Quick Directions

Formato de Color

Preview at export size

Mostrar cuadrícula superpuesta (solo vista previa)

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

Ancho

Alto

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%