CSS Gradient Generator - Create Linear & Radial Gradients Online
Create beautiful CSS gradients with live preview. Generate linear and radial gradients, copy CSS code, or export as Tailwind classes.
Frequently Asked Questions
What is a CSS gradient?
A CSS gradient is a smooth transition between two or more colors created purely with CSS code, without needing image files. Gradients can be linear (in a straight line), radial (emanating from a center point), or conic (around a center point). They are lightweight, scalable, and perfect for backgrounds, buttons, and UI elements.
What's the difference between linear and radial gradients?
Linear gradients transition colors along a straight line at a specified angle (e.g., left to right, top to bottom, or diagonal). Radial gradients transition colors outward from a center point, creating circular or elliptical patterns. Use linear gradients for directional effects and radial gradients for spotlight or glow effects.
How do I use this gradient generator?
Select the gradient type (Linear or Radial), add or adjust color stops by clicking on the color pickers, set the direction/angle using the visual picker or input field, preview your gradient in real-time, then copy the CSS code or Tailwind classes using the copy buttons.
What is Tailwind CSS output and when should I use it?
Tailwind CSS is a utility-first CSS framework popular in modern web development. If your project uses Tailwind, you can copy the generated classes (like bg-gradient-to-r from-blue-500 to-purple-500) directly into your HTML. Note: Tailwind only supports linear gradients with 2-3 color stops.
How many color stops can I add?
You can add up to 10 color stops in a single gradient. Each stop can have its own color and position (0-100%). A minimum of 2 color stops is required for a gradient to display. Drag the markers on the gradient bar to adjust positions.
Is this gradient generator secure and private?
Yes. This tool runs 100% in your browser using client-side JavaScript. No gradient data is ever sent to any server. All generation and code output happens locally on your device, making it safe for proprietary brand colors and confidential design work.
Code Examples
// Create CSS gradients programmatically
function createLinearGradient(angle, colorStops) {
const stops = colorStops
.map(stop => `${stop.color} ${stop.position}%`)
.join(', ');
return `linear-gradient(${angle}deg, ${stops})`;
}
function createRadialGradient(shape, position, colorStops) {
const stops = colorStops
.map(stop => `${stop.color} ${stop.position}%`)
.join(', ');
return `radial-gradient(${shape} at ${position.x}% ${position.y}%, ${stops})`;
}
// Usage
const linear = createLinearGradient(135, [
{ color: '#667eea', position: 0 },
{ color: '#764ba2', position: 100 }
]);
console.log(linear);
// linear-gradient(135deg, #667eea 0%, #764ba2 100%)
document.body.style.background = linear;