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.