Painting with Light: The CSS Gradient Guide
Master linear and radial gradients. Learn how to create smooth color transitions and complex backgrounds using pure CSS.
Introduction
Gradients are one of the most versatile design tools in CSS. A well-crafted gradient can transform a flat, uninspiring layout into something that feels dynamic and polished. Whether you are building a hero section background, a button hover effect, or a full-page landing design, understanding how to control color stops, direction, and blending is essential. Our Gradient Generator lets you visually design linear and radial gradients, preview them in real time, and copy the generated CSS with a single click — no guesswork, no manual tweaking.
Step-by-Step Guide
Choose Your Gradient Type
Select between "Linear" for directional transitions or "Radial" for circular expansions. Linear gradients are perfect for backgrounds, while radial gradients excel at creating focal points and highlights.
Add and Organize Color Stops
Click anywhere on the color bar to add a new stop. Drag stops to adjust their position, and click the color swatch to pick the perfect hue and opacity (alpha channel).
Adjust Direction and Scale
Use the angle dial for linear gradients or the position controls for radial ones. Fine-tune the "spread" of the colors to achieve either a hard edge or a soft, atmospheric transition.
Pro Tips & Best Practices
Avoid "Grey Midpoints": When transitioning between two distant colors (like blue and yellow), the midpoint can often look muddy. Add a third, vibrant color in the middle to maintain saturation.
Angle Accuracy: 180 degrees is the standard top-to-bottom transition. For a more modern feel, try 135 degrees (top-left to bottom-right).
Accessibility: Ensure your foreground text maintains a high contrast ratio against ALL parts of the gradient, not just the lighter or darker end.
Common Mistakes to Avoid
Frequently Asked Questions
What is a Conic Gradient?
A conic gradient transitions colors around a center point (like a color wheel or a pie chart). While our current tool focuses on Linear and Radial, Conic is a powerful modern CSS feature for charts and circular loaders.
Will these gradients work on buttons?
Absolutely. Apply the generated `background` property to any button class. We recommend slightly different hover states (by shifting the angle or hue) for better interactivity.