CSS Gradient Generator: Linear, Radial & Conic

How to create a CSS gradient

1. Pick a preset or press Random to start from a gradient you like.
2. Choose the type: linear (a straight line at an angle), radial (spreading out from a point) or conic (sweeping around a center).
3. Edit the color stops: change each color, drag its position slider, or click the gradient bar to add a stop exactly where you click. You can use up to eight stops.
4. Copy the CSS. The link in your address bar also stores the gradient, so you can bookmark it or share it with your team.

Gradient types in CSS

• linear-gradient(): colors change along a line. 90deg runs left to right, 180deg top to bottom. It is the usual choice for buttons, hero backgrounds and section dividers.
• radial-gradient(): colors spread from a center point as a circle or an ellipse. Useful for spotlights, glows and soft vignettes behind content.
• conic-gradient(): colors rotate around a center, like a color wheel. Use it for pie-chart effects, loading rings and color pickers.

Each color stop has a color and a position in percent. Two stops at the same position create a hard edge instead of a blend, which is how CSS stripes are made.

Tips for better gradients

• Keep the solid color fallback switched on. The first background line is used while the page loads and in the rare tools that do not render gradients.
• Colors that sit close together on the color wheel blend more smoothly. Very different hues can create a gray band in the middle; add a stop in between to keep the transition bright.
• Check text placed on a gradient at its lightest and darkest point with the contrast checker.
• For a subtle background, use two tints of the same color from the tints and shades generator.

Using the code with Bootstrap and Tailwind CSS

The output is plain CSS, so it works in any project. In Bootstrap, add it to your own class or a custom property. In Tailwind CSS you can paste the gradient into an arbitrary value, for example bg-[linear-gradient(135deg,#FF7E5F_0%,#FEB47B_100%)], or use it in your stylesheet. Browse the hero sections for layouts that use gradient backgrounds.