CSS

Gradient Generator

Choose a gradient type, set your colors, and copy the CSS when it looks right.

Result

CSS 

.my-gradient {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
}

Related Tools

Blend three colors into a CSS background

Choose a linear or circular radial gradient, set the three colors, and move their percentage stops. For a linear gradient, adjust the angle. Copy the generated .my-gradient rule and apply that class to an element, or move its background declaration into your own rule.

Angles and color stops

A linear gradient at 0deg points upward; 90deg points right. The radial option expands from the center and does not use the angle setting.

Each stop marks where its color is reached. Widely spaced stops create a longer transition; equal positions make a sharp boundary. Stops remain in the order shown. If a later position is lower than an earlier one, CSS adjusts it to the previous position, which can create a hard edge.

Example: a diagonal blend

.hero {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 50%, #EC4899 100%);
}

Check the finished element

  • The element’s dimensions affect the appearance. Test the exported background at the sizes used in your layout.
  • For text placed over a gradient, check contrast everywhere the text overlaps the background. A check of the endpoint colors alone can miss a problem.
  • This tool exports three opaque color stops. Transparency, additional stops, repeating gradients, and custom radial positions require editing the CSS.
  • The background shorthand also resets other background properties. Use background-image if you need to preserve them.

Use the Color Converter to work with HEX, RGB, and HSL values.

← Back to CSS Tools