🌈 Creador CSS de Degradados — Construye Gradientes

Create linear, radial, and conic CSS gradients visually. Multi-stop color picker, angle control, live preview. Copy CSS or Tailwind code free.

Design your perfect CSS gradient without writing a single line of code. Add color stops, drag them to reposition, pick linear/radial/conic type, adjust the angle — and copy the ready-to-use CSS or Tailwind classes instantly.

Type

Angle: 135°

Color Stops

How to Use

Choose gradient type

Select Linear, Radial, or Conic from the type selector, then set the angle or position.

Add color stops

Click each stop to pick a color. Add more stops with the + button or drag to reposition them.

Copy the CSS

The live preview updates instantly. Click Copy CSS to get the ready-to-use background declaration.

Frequently Asked Questions

What is a CSS gradient? +

A CSS gradient creates smooth transitions between two or more colors without using an image. Gradients are defined with background-image (or background shorthand) using linear-gradient(), radial-gradient(), or conic-gradient() functions.

What is the difference between linear, radial, and conic gradients? +

Linear gradients transition along a straight line at any angle. Radial gradients spread outward from a center point in a circular or elliptical shape. Conic gradients rotate around a center point like a color wheel or pie chart.

How do I add multiple color stops? +

Click "Add Stop" to insert additional color stops between existing ones. Each stop has a color and a position (0–100%). You can drag stops to reposition them or click the × to remove them.

How do I use a gradient in CSS? +

Copy the generated CSS and use it as: background: linear-gradient(45deg, #ff6b6b, #4ecdc4); or apply it to background-image. Gradients can also be applied to borders, masks, and text with additional CSS techniques.

What is the Tailwind output for gradients? +

Tailwind v3 supports gradients with from-{color}, via-{color}, to-{color} utility classes combined with bg-gradient-to-{direction}. For custom colors outside the palette, use the arbitrary value syntax: from-[#ff6b6b].

Guía: Generador de Gradientes CSS

¿Qué es?

Los gradientes CSS crean transiciones suaves entre colores sin imágenes. Tipos: linear-gradient(), radial-gradient(), conic-gradient() y sus variantes repetitivas. Perfectamente escalables y animables con custom properties.

Cómo usar

Selecciona el tipo: lineal, radial o cónico.
Añade paradas de color en la barra de gradiente.
Ajusta el ángulo con los controles visuales.
Copia el CSS.

Consejos

Usa oklch en CSS moderno para gradientes más suaves sin "gris sucio" en el medio.
Múltiples gradientes en background (separados por coma) permiten efectos de capas.
Los gradientes se pueden animar con CSS transitions en custom properties.