Skip to content
All tools

Color

CSS Gradient Generator

Compose vivid three-stop gradients with precise direction, position, and color controls.

Mode

Preset

Angle

125deg

Middle stop

48%

Live surface

Color in motion.

background: linear-gradient(125deg, #ff3d00 0%, #f2b705 48%, #fff4cc 100%);

Choose a gradient that supports the content

  1. Choose linear for a directional blend, radial for a soft focal point, or conic for color arranged around a center.
  2. Set three colors, then move the middle stop to control how much space each color occupies. Reverse the colors to compare the balance.
  3. Copy the CSS background into your own selector and check it at the actual size of your component.

A passing contrast check at one stop does not prove that text over the entire gradient is readable. Test the lightest and darkest areas behind the text. CSS gradients adapt to the element; they are not exported image files.

CSS gradients on MDN

A restrained background for a section

.section {
  background: linear-gradient(135deg, #f8fafc 0%, #e0f2fe 50%, #dbeafe 100%);
}

Nearby light colors create a quiet transition. Keep important text on an area with enough contrast throughout the blend, including on narrower screens.