🌈 CSS Gradient Generator
Create CSS gradient backgrounds visually — linear, radial, and conic. Add multiple color stops, set angle and position. Copy CSS instantly. Free online gradient generator.
Color Stops
How to Use
1
Choose gradient type
Select Linear, Radial, or Conic from the type selector, then set the angle or position.
2
Add color stops
Click each stop to pick a color. Add more stops with the + button or drag to reposition them.
3
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
oklchen 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.