Gradient Generator

CSS gradients let you display smooth transitions between two or more colors. This tool generates the CSS code you need.

Gradient Types

• Linear: Colors transition along a straight line at a specified angle. Use 90deg for left-to-right, 180deg for top-to-bottom
• Radial: Colors radiate outward from a center point in an ellipse or circle shape
• Conic: Colors transition around a center point, like a color wheel. Useful for pie charts and decorative effects

Color Stops

• Each stop defines a color and its position (0% to 100%) along the gradient
• Click on the gradient bar to add a new stop at that position
• Drag stops on the bar to reposition them
• A minimum of two stops is required to form a gradient

Tips

• Use analogous colors (neighbors on the color wheel) for smooth, natural gradients
• Add a middle stop between contrasting colors to avoid a muddy transition
• Subtle gradients with similar colors work well as backgrounds
• Try the presets as a starting point, then customize from there

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.