Gradient Maker

Design CSS gradients with live preview and copy the code.

Color Stops

About This Tool

Create CSS gradients visually with a live preview. Pick colors, adjust angles, and add stops to build linear or radial gradients, then copy the generated CSS code for your website.

How to Use

  1. Choose your gradient colors using the color pickers.
  2. Adjust the angle, direction, or gradient type.
  3. Copy the generated CSS code and use it in your stylesheet.

Frequently Asked Questions

How do I make a gradient background in CSS?

Use background: linear-gradient(direction, color1, color2). This tool generates the exact CSS code visually so you don't need to write it by hand.

What is the difference between linear and radial gradients?

Linear gradients transition in a straight line (top to bottom, left to right). Radial gradients radiate outward from a center point in a circular or elliptical pattern.