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%)]
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.