CSS Gradient Generator
Create linear/radial gradients with ready-to-copy CSS.
Preview
Color A
Color B
Color C
Generated CSS
Color Chart
Color Wheel
Click or drag on the wheel to set the selected color.
Create linear/radial gradients with ready-to-copy CSS.
CSS Gradient Generator builds linear and radial CSS gradients with three color stops, a live preview, and ready-to-copy CSS output. It is completely free, browser-based, and requires no account or installation.
CSS Gradient Generator is a visual design tool that helps you create smooth, multi-stop CSS gradients without writing code by hand. Choose between linear and radial gradient types, pick three colors, and position each stop along the gradient with intuitive sliders. A large live preview updates instantly as you adjust settings, and the generated CSS rule appears in a textarea ready to copy into your stylesheet. A built-in color chart and interactive color wheel make it easy to explore and select colors that harmonize well together.
Select a gradient type -- linear or radial -- from the dropdown. For linear gradients, set the angle in degrees. Pick three colors using the color inputs and drag the stop sliders to control where each color begins blending. The live preview and CSS output update in real time with every change. Click any color chip below the preview to set it as the active target, then use the color wheel to fine-tune its hue visually. When the gradient looks right, click Copy CSS to send the rule to your clipboard. Paste it directly into your stylesheet or design tool.