CSS Gradient Generator
Design linear and radial CSS gradients visually with color stops and angle, and copy the CSS or a Tailwind arbitrary-value class.
CSS
background: linear-gradient(135deg, #1a73e8 0%, #e81a73 100%);
Tailwind (arbitrary value)
bg-[linear-gradient(135deg,_#1a73e8_0%,_#e81a73_100%)]
General calculation reads
Amazon affiliateAs an Amazon Associate we may earn from qualifying purchases. This does not add cost for you.
About this tool
CSS gradients let you blend colors smoothly across a background without images. This generator builds both linear gradients (color transitions along an angle you set) and radial gradients (color radiating from a center). Pick two colors and their stop positions, choose the angle for linear gradients, and the live preview updates instantly. It outputs the standard CSS background value and a Tailwind arbitrary-value class for utility-first workflows. Gradients are widely supported and resolution-independent, making them ideal for hero sections, buttons, and overlays. Adjusting the stop percentages controls how quickly one color gives way to the other — moving them closer creates a sharper transition, farther apart a gentler blend.
How to use it
- Choose linear or radial.
- Pick the two colors and their stop positions.
- Set the angle for linear gradients.
- Copy the CSS or the Tailwind class.
Frequently asked questions
- How do I create a CSS gradient?
- Use the background property with linear-gradient() or radial-gradient(). For example, background: linear-gradient(135deg, #1a73e8 0%, #e81a73 100%). This tool builds that string visually so you can see the result before copying.
- What does the angle control?
- In a linear gradient, the angle sets the direction of the color transition: 0deg goes bottom-to-top, 90deg left-to-right, 180deg top-to-bottom. 135deg (the default) runs diagonally from top-left to bottom-right.
- What are color stops?
- Color stops define where each color sits along the gradient line, as a percentage. Two stops at 0% and 100% spread the blend evenly; moving them closer (e.g. 40% and 60%) concentrates the transition in the middle and leaves solid color at the ends.
- What is the difference between linear and radial?
- A linear gradient transitions along a straight line at a given angle. A radial gradient transitions outward from a center point in concentric circles or ellipses, useful for spotlight or glow effects.
- Can I use more than two colors?
- CSS gradients support any number of color stops. This tool focuses on a clean two-color gradient for simplicity; you can extend the generated CSS by adding more comma-separated color-stop pairs.
- How do I use a gradient in Tailwind?
- Tailwind has gradient utilities (bg-gradient-to-r with from-/to- colors), but for a custom angle or exact colors, the arbitrary-value class this tool outputs — bg-[linear-gradient(...)] — drops the raw CSS straight into a class.