CSS Gradient Generator
Create beautiful CSS gradients with live preview. Click on the preview to add color stops, adjust the angle, and copy the CSS with one click.
Browse Presets
CSS Output
How to Create CSS Gradients
CSS gradients let you create smooth transitions between two or more colors without using image files. They are rendered natively by the browser, making them lightweight, scalable, and resolution-independent. Here is how to use this tool:
- Choose a gradient type — click Linear or Radial at the top of the controls panel.
- Set the angle — for linear gradients, drag the angle dial or slider to control the direction. 0deg points up, 90deg points right, 180deg points down.
- Add color stops — click anywhere on the gradient bar to add a new stop. Each stop has a color and a position (0-100%).
- Edit stops — click a stop in the list below the bar to change its color or position, or remove it.
- Try a preset — click any preset gradient to load it as a starting point, then customize.
- Copy the CSS — the CSS output panel shows the exact CSS code. Click "Copy CSS" to use it in your project.
About CSS Gradients
CSS supports two main gradient types: linear-gradient, which transitions colors along a straight line at a specified angle, and radial-gradient, which radiates outward from a center point. Both accept multiple color stops with optional positions.
The CSS syntax for a linear gradient is: background: linear-gradient(45deg, #ff0000 0%, #0000ff 100%);. The angle specifies the direction of the gradient line. Color stops define which colors appear at which positions along that line.
Gradients can be used anywhere CSS accepts an image value: backgrounds, borders (with border-image), list markers, and generated content. They can be layered with multiple backgrounds by comma-separating them.
Frequently Asked Questions
How do I create a CSS gradient?
Use the CSS linear-gradient or radial-gradient function. For example: background: linear-gradient(90deg, #ff0000, #0000ff); creates a horizontal gradient from red to blue. Use this tool to generate the code visually — just adjust the stops and angle, then copy the output.
What is the difference between linear and radial gradients?
Linear gradients transition colors along a straight line at a specified angle. Radial gradients radiate outward from a center point in all directions. Linear is better for directional effects like buttons and backgrounds; radial is better for spotlights, glows, and spherical effects.
How do I add multiple color stops?
Click anywhere on the gradient bar to add a color stop. Each stop has a color and a position (0-100%). You can add as many stops as you need. Use the stops list below the bar to edit colors, adjust positions, or remove stops.
Can I use gradients in Tailwind CSS?
Yes. In Tailwind v4, use the bg-linear-* utilities or arbitrary values like bg-[linear-gradient(90deg,#ff0000,#0000ff)]. You can also use the generated CSS code directly in a custom class or inline style.