Create beautiful linear, radial, and conic CSS gradients. Customize up to 10 color stops, copy CSS code, or download as PNG, JPEG, or WebP.
background: ;Our free CSS gradient generator lets you create beautiful color gradients for your websites, apps, and design projects. Build linear, radial, and conic gradients with up to 10 color stops, preview them in real-time, and instantly copy the CSS code or download as PNG, JPEG, or WebP images.
Whether you're designing hero backgrounds, button styles, or card overlays, this tool generates production-ready CSS gradients that work in all modern browsers including Chrome, Firefox, Safari, and Edge.
Transitions colors along a straight line. You can control the angle — horizontal, vertical, or any diagonal. The most commonly used gradient type for backgrounds, buttons, and overlays.
linear-gradient(to right, #f00, #00f)Colors radiate outward from a center point in a circular or elliptical pattern. Great for spotlight effects, glowing elements, and circular UI components.
radial-gradient(circle, #4facfe, #00f2fe)Colors sweep around a center point like a color wheel. Ideal for pie charts, circular progress indicators, and decorative color wheel effects.
conic-gradient(from 0deg, #f00, #0f0, #00f)Color Picker
Pick and convert colors between formats
Color Tool
Comprehensive color manipulation tool
Blend Colors
Blend two colors together
Accessible Color Palette
Create accessible color palettes
Analogous Color Scheme
Generate analogous color schemes
Brand Color Identifier
Identify brand colors from images