Purple Haze Gradient

Gradient Details

Type

Linear

Angle

135deg

Color 1

#667eea

Color 2

#764ba2

CSS Code
background: linear-gradient(135deg, #667eea, #764ba2);

Usage Examples

As Background

Section Background

As Button

As Text

Gradient Text

About This Gradient

The Purple Haze gradient is a smooth linear blend that flows from #667eea to #764ba2 at a 135-degree angle, creating rich, sophisticated shades that suggest innovation and luxury. Gradients in the purple family are frequently chosen by designers who want to add visual depth and dimensionality without resorting to flat, single-tone fills. The transition from blue/cool into blue/cool gives this gradient a distinctive character that works equally well as a hero background, UI card accent, or decorative overlay. Whether you are building a landing page, a mobile app, or a data dashboard, the Purple Haze gradient offers an immediately polished, professional appearance that elevates the overall design.

When to Use the Purple Haze Gradient

Because of its purple color palette, this gradient is especially effective in the following design contexts:

Apply this gradient sparingly for maximum impact — use it as a focal-point element rather than a page-wide background to keep your design balanced and readable.

Color Information

#667eea

rgb(102, 126, 234)

Color family: blue/cool

Contrast vs white: 3.7:1

#764ba2

rgb(118, 75, 162)

Color family: blue/cool

Contrast vs white: 6.4:1

Accessibility Note

The average contrast ratio of these two colors against a white background is approximately 5.1:1. This meets the WCAG 2.1 Level AA standard (4.5:1) for normal-sized body text, making the gradient suitable for text overlays in many contexts. Always verify contrast with your specific text color using a dedicated accessibility checker before shipping to production.

CSS Gradient Tips

Browser Support

Linear gradients using the standard linear-gradient() syntax are supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. Internet Explorer 10+ also supports them. No vendor prefixes are required for current browser targets, but if you must support very old WebKit browsers, you can optionally add -webkit-linear-gradient() as a fallback.

Providing a Fallback Color

Always declare a solid background-color before your gradient declaration. If a browser or email client does not support gradients, it will display the solid color instead of nothing. Choose the dominant color of the gradient — for this preset, #667eea is a good fallback choice.

Animating Gradients

CSS does not natively animate between two linear-gradient() values, because gradients are treated as images. A reliable workaround is to set the background-size to a large value (e.g., 200% 200%) and animate background-position using a CSS @keyframes rule to create a flowing, animated effect.

Adjusting the Angle

The default angle for this preset is 135 degrees (top-left to bottom-right). You can change the angle to suit your layout: 0deg flows bottom to top, 90deg flows left to right, and 180deg flows top to bottom. You can also use keyword directions like to right or to bottom right for simpler syntax.

Frequently Asked Questions

What colors are in the Purple Haze gradient?

The Purple Haze gradient blends #667eea (rgb(102, 126, 234)) with #764ba2 (rgb(118, 75, 162)) across a 135-degree diagonal.

How do I use this gradient in CSS?

Copy the snippet below and add it to any CSS selector. For a text gradient effect, append the background-clip rules shown in the Usage Examples section above.

background: linear-gradient(135deg, #667eea, #764ba2);

Is this gradient accessible?

The Purple Haze gradient has an average color contrast of 5.1:1 against white, which meets the WCAG 2.1 AA minimum for normal text. It is generally safe to use with white text overlays, though you should verify with your specific font size and weight.

All Presets Pink Lemonade →