Gradient Generator
Create beautiful CSS gradients with live preview and copy-paste code
Gradient Type
Direction
Color Stops
Actions
Preview
CSS Code
Background
background: linear-gradient(to right, #3498DB 0%, #9B59B6 100%);
Background Image
background-image: linear-gradient(to right, #3498DB 0%, #9B59B6 100%);
Complete CSS Class
.gradient {
background: linear-gradient(to right, #3498DB 0%, #9B59B6 100%);
}Tailwind CSS (inline style)
<div style={{ background: 'linear-gradient(to right, #3498DB 0%, #9B59B6 100%)' }}>Note: Tailwind doesn't support arbitrary gradient values. Use inline styles for complex gradients.
Preset Gradients
Usage Examples
Hero Section
Text content on gradient background
Content with gradient border
About CSS Gradients
CSS gradients allow you to create smooth color transitions between multiple colors. They're perfect for backgrounds, buttons, and creating visual interest in your designs.
Linear Gradients
Linear gradients transition colors along a straight line in any direction. They're the most commonly used type of gradient in web design.
Radial Gradients
Radial gradients emanate from a center point in a circular pattern. They're great for creating spotlight effects and focal points.
Color Stops
Color stops define where each color begins and ends in the gradient. You can use multiple stops to create complex multi-color gradients.
Performance
CSS gradients are rendered by the browser and are more performant than using gradient images. They're also responsive and scale perfectly.