Plum Perfect Gradient: CSS Code & Colors

Q: What's the CSS code for the Plum Perfect gradient?

Use background: linear-gradient(315deg, #667EEA 0%, #764BA2 100%);. RGBA and HSLA versions are also available on this page.

Plum Perfect Gradient

Cool indigo into rich violet.

Customize this gradient →

Opens it in the generator: change the type or direction, adjust the colors, then copy the CSS or download.

Color Stops

#667EEA

#764BA2

Plum Perfect CSS Code

background: #667EEA;
background: linear-gradient(315deg, #667EEA 0%, #764BA2 100%);

background: rgba(102, 126, 234, 1.0);
background: linear-gradient(315deg, rgba(102, 126, 234, 1.0) 0%, rgba(118, 75, 162, 1.0) 100%);

background: hsla(229, 76%, 66%, 1.0);
background: linear-gradient(315deg, hsla(229, 76%, 66%, 1.0) 0%, hsla(270, 37%, 46%, 1.0) 100%);

background: #667EEA;
background: linear-gradient(315deg, #667EEA 0%, #764BA2 100%);
background: linear-gradient(315deg in oklch, oklch(62.71% 0.1638 271.53) 0%, oklch(50.12% 0.1384 304.73) 100%);

The same colors blended in OKLCH, so this one looks more vivid than the gradient above. Older browsers show the standard gradient. How OKLCH gradients work →

bg-linear-315/srgb from-[#667EEA] from-0% to-[#764BA2] to-100%

bg-[linear-gradient(315deg,#667EEA_0%,#764BA2_100%)]

Try it as

Similar Gradients

More Gradient Presets

FAQ

What is the Plum Perfect gradient?