Gradient Generator

Build a two-color linear or radial CSS gradient with a live preview.

Gradient settings

Generated locally. Preview only—check the final gradient in your own browser and layout.

Gradient result

About the CSS Gradient Generator

Combine two colors into a reusable CSS background declaration without external libraries or remote assets.

How to use it

  1. Choose the starting and ending colors.
  2. Select linear or radial and choose a direction for linear gradients.
  3. Review the preview and copy the CSS declaration.

Generated CSS

Linear output uses linear-gradient with a direction; radial output uses a centered circular radial-gradient.

Example

Blue #3b82f6 and violet #8b5cf6 can produce background: linear-gradient(to right, #3b82f6, #8b5cf6).

Notes

Actual appearance depends on element size, surrounding colors and browser rendering. Generated CSS may need adjustment for your layout.