Create beautiful CSS gradients with live preview and code export
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);bg-gradient-to-br from-[#667eea] to-[#764ba2]Pick colors and convert between HEX, RGB, HSL with WCAG contrast checker
Convert colors between HEX, RGB, HSL, HSV and CMYK formats
Generate harmonious color palettes from a base color
Check color contrast ratio for WCAG accessibility compliance
CSS Gradient Generator is a free online tool that helps you create stunning gradient backgrounds with a live visual preview and ready-to-use CSS code. Gradients are one of the most versatile design elements in modern web development, used for backgrounds, buttons, overlays, text effects, and decorative accents. Instead of writing gradient syntax by hand, this tool provides an intuitive interface where you can pick colors, adjust angles, add multiple color stops, and see the result update in real time. CSS supports two main gradient types: linear gradients that transition colors along a straight line, and radial gradients that radiate outward from a central point. Linear gradients are the most commonly used, defined by an angle and a series of color stops. By adjusting the angle, you control the direction of the color flow — 0° goes from bottom to top, 90° goes from left to right, and 180° goes from top to bottom. Adding more color stops creates multi-tone gradients with rich, complex transitions. The tool also includes a collection of carefully curated gradient presets that you can use as starting points. Whether you need a subtle background wash, a bold hero section gradient, or a trendy glassmorphism effect, you will find inspiration in the presets library. Once you have crafted the perfect gradient, simply copy the generated CSS code and paste it into your stylesheet. All processing happens in your browser — no data is sent to any server.