Gradient Generator
Create linear and radial CSS gradients
Online CSS Gradient Generator - Linear, Radial and Conic
What are gradients in modern CSS and why use them?
CSS gradients let you create smooth transitions between two or more colors directly in code, with no images involved. That removes HTTP requests and improves performance, scales to any resolution without pixelation, and stays easy to tweak and animate. Modern CSS supports three types: linear-gradient, a straight-line transition with a configurable direction; radial-gradient, a transition spreading outward from a center point in a circle or ellipse; and conic-gradient, a transition sweeping around a center point like a cone seen from above. This tool outputs CSS that works in every modern browser without vendor prefixes.
How is CSS gradient syntax built?
A linear gradient is defined by a direction (an angle such as 90deg, or keywords such as "to right" or "to bottom left"), a list of colors, and optional color stops that pin the exact position of each color. For example: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%). Radial gradients take a shape (circle or ellipse), a size (closest-side, farthest-corner and so on), a center position and the colors. Conic gradients specify a starting angle and a center position. You can layer several gradients in a single background declaration to build complex effects.
What are the creative uses of CSS gradients in web design?
CSS gradients show up all over modern design: hero section and landing page backgrounds for visual impact, semi-transparent overlays on images that keep text readable, buttons with a gradient fill for extra depth, gradient borders using border-image or pseudo-elements, gradient text through background-clip: text combined with -webkit-text-fill-color, soft non-rectangular shadows, loading bars and progress indicators, and glassmorphism effects. They are the simplest way to add depth and dimension without external assets.
If you work with this tool, you will probably also find these useful Color Converter, Palette Generator, Flexbox Generator, Regex Tester.
Frequently asked questions
Can I animate CSS gradients with transitions?
Not directly: CSS cannot interpolate between gradient values with transition. There are workarounds, though. Animate background-position or background-size to create movement while the gradient itself stays static, use ::before and ::after pseudo-elements holding different gradients and animate opacity to cross-fade between them, or register color properties as animatable with the CSS Houdini @property rule. For complex fluid color animation, drive the gradient custom properties from JavaScript.
How do I create a gradient that fades to transparent?
Use colors with an alpha channel. The modern syntax gives you rgba(102, 126, 234, 0.5), color-mix(), the slash notation rgb(102 126 234 / 50%), or the transparent keyword. A typical image overlay looks like linear-gradient(to bottom, rgba(0,0,0,0.7), transparent). That pattern is ideal for overlays that keep superimposed text readable over photography.
What is the difference between linear-gradient and repeating-linear-gradient?
linear-gradient creates a single color transition that covers the whole element. repeating-linear-gradient repeats the color pattern indefinitely, producing stripes or patterns, with the color stops defining the size of the repeated unit. A striped background looks like repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px). It is perfect for textured backgrounds, stylised progress indicators and decorative effects without images.