CSS Gradient Generator

Build linear, radial or conic CSS gradients with a live preview. Set colors, stop positions and direction, then copy the generated background rule.

Color Stops

#ff6b6b
#4ecdc4

Live Preview

CSS Code

background: linear-gradient(45deg, #ff6b6b 0%, #4ecdc4 100%);
Advanced Options

History

1 / 1
Presets
History
1 gradients

Tips

Linear gradients transition colors in a straight line. Perfect for subtle backgrounds and modern designs.

CSS Gradient Generator

Create a CSS background gradient without manually assembling every color stop. Choose linear for a directional blend, radial for a blend around a center or conic for colors arranged around an angle. Start with two stops, such as #ff6b6b at 0% and #4ecdc4 at 100%, then adjust the transition in the preview.


The generated output is a background declaration using your selected type, direction and ordered stops. Paste it into a CSS selector in your project. The preview helps inspect the blend, but it does not check whether text placed over the gradient has sufficient contrast across its full area; evaluate that in the final layout.

Features

  • Choose linear, radial or conic gradient types.
  • Add, remove and position color stops.
  • Set type-specific direction, angle or center options.
  • Preview changes, apply a preset and copy the generated CSS background rule.

How to use

  1. Select a gradient type; begin with linear if you want a directional blend.
  2. Choose two or more colors and adjust their percentage positions.
  3. Set the direction or angle, then inspect the live preview and generated CSS.
  4. Copy the background declaration into your CSS selector and check it with the actual content placed over it.