Select Language
Pick your colors, choose linear or radial, adjust the angle — and get clean CSS code to copy instantly. Free, browser-based, no sign-up required.
A CSS gradient generator lets you create gradient backgrounds visually and outputs the CSS code you need to paste directly into your stylesheet. Instead of manually writing linear-gradient() or radial-gradient() syntax, you set colors and angles visually and get clean, ready-to-use code.
CSS gradients are widely used in web design for hero sections, button backgrounds, card overlays, and illustration effects. They're natively supported in all modern browsers and require zero images or assets.
Linear gradients transition colors along a straight line at a specified angle. linear-gradient(135deg, #color1, #color2) creates a diagonal gradient. The angle (0°–360°) controls the direction.
Radial gradients emanate from a central point outward in a circular or elliptical pattern. radial-gradient(circle, #color1, #color2) creates a circular bloom effect. Great for spotlight and glow effects.