CSS Gradient Generator
Create beautiful linear, radial, and conic gradients visually. Add color stops, adjust angles, pick from presets, and copy the CSS code instantly.
About CSS Gradients
CSS gradients allow you to create smooth color transitions directly in the browser without using images. There are three main types: linear gradients transition colors along a straight line defined by an angle (e.g. linear-gradient(135deg, #ff6b6b, #4ecdc4)), radial gradients radiate outward from a central point in either a circle or ellipse shape, and conic gradients sweep colors around a center point like slices of a pie chart. Each type accepts an arbitrary number of color stops, giving you precise control over where each color appears in the transition.
Linear gradients are the most commonly used type. The angle parameter controls the direction of the color flow — 0deg goes bottom-to-top, 90deg goes left-to-right, and 180deg goes top-to-bottom. You can also use keyword directions like to right or to bottom left. Each color stop can optionally include a percentage value that determines its exact position along the gradient line, enabling effects like hard stops, asymmetric transitions, and multi-color bands.
Radial and conic gradients open up even more creative possibilities. Radial gradients are perfect for spotlight effects, glowing buttons, and background accents — you can control both the shape (circle or ellipse) and the origin position. Conic gradients are ideal for color wheels, pie-chart-style visualizations, and abstract patterns. Both types are widely supported in modern browsers: linear-gradient and radial-gradient have near-universal support (including IE 10+), while conic-gradient works in all evergreen browsers (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+).
Gradients are a powerful tool in modern web design for creating eye-catching hero sections, button hover effects, card backgrounds, and decorative overlays without increasing page load time. Unlike raster images, CSS gradients scale perfectly at any resolution and can be animated or dynamically modified with JavaScript. Combining gradients with background-blend-mode, layering multiple gradients on a single element, or using them with CSS mask-image unlocks sophisticated visual effects that were previously only achievable in graphic editors.