Tools

Gradient Generator

Online gradient generator tool by 4TBOX.

AI-style gradient helper

Describe un estilo y generamos un gradiente base. En el futuro puedes conectar aquí tu propia API de IA.

Quick presets

Animation

Gradient preview

Angle map

Gradient snapshot135° · Linear

Tip: copia el CSS, Tailwind o React snippet y pégalo en tu componente, layout o hero section.

Button

Card

Gradient header

Ideal para dashboards, layouts o secciones destacadas.

Hero

Hero section

Usa este gradiente como fondo de tu landing o cabecera principal.

Gradient settings

Angle135°

Color stops

Stop 1 · 0%

RGB: 14, 165, 233HSL: 199°, 89%, 48%

Stop 2 · 100%

RGB: 99, 102, 241HSL: 239°, 84%, 67%

background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);

How to use this CSS gradient?

Copia el snippet y pégalo en tu hoja de estilos, componente o override de Tailwind. Puedes exportar el gradiente como PNG para usarlo como background de imágenes, thumbnails o assets.