CSS Gradient Builder

Build linear, radial, or conic gradients with a visual editor. Add stops, set angle, copy CSS instantly.

Runs in your browser
Type
Angle — 135°
Color Stops
#1A5C3A0%
#2E9E6350%
#7DD3FC100%
CSS Output
background: linear-gradient(135deg, #1A5C3A 0%, #2E9E63 50%, #7DD3FC 100%);

How to Use the CSS Gradient Generator

  1. Choose your gradient type: Linear, Radial, or Conic.
  2. Add color stops by clicking the gradient bar — pick colors and drag stops to adjust their positions.
  3. For linear gradients, set the angle in degrees to control the direction.
  4. Copy the generated CSS output and paste it directly into your stylesheet.

About the CSS Gradient Generator

CSS gradients create smooth transitions between two or more colors without any image files, making them ideal for backgrounds, borders, and overlays. This generator provides a visual editor for all three CSS gradient types: linear-gradient (straight transitions at any angle), radial-gradient (radiating from a center point), and conic-gradient (rotating around a center point, ideal for pie charts and color wheels). The generated CSS is standards-compliant, works in all modern browsers, and copies with one click ready for use in any CSS or Tailwind project.

Frequently Asked Questions

What is the difference between linear and radial gradient?
A linear gradient transitions colors along a straight line at a specified angle (e.g., left to right, top to bottom, or at 45 degrees). A radial gradient radiates outward from a central point in an elliptical or circular pattern. Both support multiple color stops.
How do I add transparency to a gradient?
Use RGBA or HSLA color values for your color stops, or set the alpha channel to 0 for a fully transparent stop. For example, rgba(0,0,0,0) as a stop creates a fade to transparent. This is commonly used for overlay gradients on images.
Can I use this gradient in Tailwind CSS?
Yes. Tailwind supports arbitrary CSS values using square bracket notation. For example: className="bg-[linear-gradient(135deg,#667eea,#764ba2)]". Alternatively, define the gradient as a CSS custom property in your global stylesheet and reference it in Tailwind.
What is a conic gradient?
A conic gradient (conic-gradient) creates a transition around a center point, like the sweep of a clock hand. Colors transition by angle (0–360°) rather than by distance. Common uses include pie charts, color wheels, and starburst backgrounds.