Color Gradient
CSS gradient builder with live preview and code output
CSS Gradient Builder
CSS gradients let you display smooth transitions between two or more colors. They are generated by the browser, so they look great at any screen size and can be used anywhere a background-image is accepted.
background: linear-gradient(to right, #3b82f6, #8b5cf6);-webkit-linear-gradient, though modern browsers no longer require them.How CSS Gradients Work
CSS defines two main types of gradients: linear and radial.
Linear Gradients
A linear gradient transitions colors along a straight line. You specify the direction using keywords like to right, to bottom left, or an angle like 45deg. Colors are distributed evenly by default, but you can add percentage stops to control placement.
background: linear-gradient(to right, #ff0000, #0000ff);Radial Gradients
A radial gradient radiates colors outward from a center point. By default it forms an ellipse that matches the element shape, but you can specify circle for a circular gradient.
background: radial-gradient(circle, #ff0000, #0000ff);Multi-Stop Gradients
You can add more than two color stops to create complex transitions:
background: linear-gradient(to right, #ff0000, #00ff00 50%, #0000ff);Gradient Inspiration
Click any gradient below to load it into the builder above.
Tips for Using Gradients
background property for complex effects.How to Use Color Gradient?
- 1Choose a base color using the interactive picker or enter HEX, RGB, HSL values.
- 2Generate matching color palettes, schemes, or color space transformations instantly.
- 3Click on any color code block in the results to copy it instantly to your clipboard.
Designer Friendly
Easily match colors, check contrast ratios, and generate custom palettes for your designs.
Multi-Format Support
Supports copy-paste in HEX, RGB, RGBA, HSL, HSLA, and CSS variables formats.
Runs Locally
No internet connection required. Our color engines run instantly and cleanly inside your web browser.