The CSS Gradient Generator creates CSS code for linear, radial, and conic gradients based on visual inputs for colors, stops, direction, and shape.
Gradient types
The generator supports three CSS gradient functions:
1. Linear Gradients (linear-gradient)
Colors transition along a straight line. Direction is defined by angles (e.g., 90deg) or keywords (e.g., to bottom right).
Example: background: linear-gradient(90deg, #ff7e5f, #feb47b);
2. Radial Gradients (radial-gradient)
Colors radiate outward from a central point. The shape can be a circle or an ellipse, with a defined starting position.
Example: background: radial-gradient(circle at center, #ff7e5f, #feb47b);
3. Conic Gradients (conic-gradient)
Colors transition around a center point based on an angle.
Example: background: conic-gradient(from 0deg at 50% 50%, #ff7e5f, #feb47b);
Color stops
Color stops specify the exact position where a color reaches full opacity. Adding a percentage or length after a color value sets its stop position. For example, #ff0000 0%, #0000ff 50% creates a transition that ends halfway across the element, leaving the remaining area solid blue.
Frequently Asked Questions
Do CSS gradients require vendor prefixes?
No. Standard CSS gradient syntax is supported by modern browsers. Prefixes like -webkit- are unnecessary for current web development.
How do you animate a CSS gradient?
Colors within a background-image gradient cannot be animated directly using CSS transitions. The standard method is to create an oversized gradient using background-size: 200% 200% and animate the background-position property using @keyframes.
Do gradients affect page performance?
CSS gradients are generated by the browser, requiring no network requests, making them faster to load than raster images. Extremely complex gradients with many stops can theoretically increase paint time during rendering, but this is rarely significant.
Limitations
The generated code applies to the CSS background or background-image property. It does not generate SVG gradients or <canvas> drawing commands.