CSS Gradient Generator – 2 & 3 Color Linear & Radial Tool

  • Adam
  • November 27, 2025

Generate beautiful 2-color and 3-color CSS gradients. Create linear and radial gradients with live preview. Copy ready-to-use CSS code instantly. Free tool.

CSS Gradient Generator – 2 & 3 Color

Generate a 2- or 3-Color CSS Gradient

Design soft linear or radial CSS background gradients with two or three colors, tweak directions, and copy ready-to-use code for your UI in one click.

Gradient options

Choose gradient type, orientation, and colors.

Modes

Choose gradient type

Choose orientation

Orientation applies to linear gradients.

Pick your colors

Preview

Live gradient preview

CSS code

Copy the background-image property, a class, or inline style snippet.

Copied!

Related Calculators