What CSS does this generate?

It outputs a standard CSS linear-gradient() value you can drop into a background or background-image property. The angle and both color stops are included, so it works in every modern browser with no prefixes.

Can I blend colors from two different teams?

Yes. Each stop can be set from any team's palette independently, so you can blend a color from one team with a color from another, or mix two colors within a single team's palette.

Can I use hex colors that aren't team colors?

Yes. You can type any hex value into either stop. Loading a team color is just a shortcut to fill in a published value.

Gradient Generator

Blend two colors into a CSS linear gradient. Set each stop by hand or load a published team color, adjust the angle, and copy the CSS straight into your project.

From

Angle135°

CSS

background: linear-gradient(135deg, #006bb6, #552583);

Frequently asked questions

What CSS does this generate?: It outputs a standard CSS linear-gradient() value you can drop into a background or background-image property. The angle and both color stops are included, so it works in every modern browser with no prefixes.
Can I blend colors from two different teams?: Yes. Each stop can be set from any team's palette independently, so you can blend a color from one team with a color from another, or mix two colors within a single team's palette.
Can I use hex colors that aren't team colors?: Yes. You can type any hex value into either stop. Loading a team color is just a shortcut to fill in a published value.