Gradient Generator
Generate CSS linear, radial, and conic gradients.
What are CSS Gradients?
CSS gradients let you display smooth transitions between two or more colors. Unlike images, gradients are generated by the browser, making them infinitely scalable, fast to load, and easy to modify. They're essential for modern web design, creating depth, visual interest, and polished user interfaces.
This tool generates ready-to-use CSS code for linear, radial, and conic gradients—just paste into your stylesheet and you're ready to go.
Gradient Types Explained
Linear Gradients
Colors transition along a straight line. You can control the direction (to top, to right, angles) and create smooth backgrounds, buttons, and overlays.
linear-gradient(to right, #6366F1, #EC4899)Radial Gradients
Colors radiate from a central point outward in a circular or elliptical pattern. Perfect for spotlight effects, glows, and circular elements.
radial-gradient(circle, #6366F1, #EC4899)Conic Gradients
Colors rotate around a center point like a color wheel. Great for pie charts, spinners, and decorative elements.
conic-gradient(from 0deg, #6366F1, #EC4899)How to Use This Tool
- Enter two or more colors as comma-separated hex codes
- Select the gradient type (all, linear, radial, or conic)
- Click "Generate" to create gradient options
- Preview each gradient variation with live CSS
- Click "Copy" to copy the CSS code to your clipboard
Common Use Cases
- Hero Sections: Create eye-catching full-width backgrounds with linear gradients
- Buttons: Add depth and polish to CTA buttons with subtle gradients
- Text Effects: Apply gradients to text with background-clip for modern typography
- Overlays: Create image overlays that fade into content areas