Colormapped
CSS gradient

Purple Gradient

A purple gradient moving from light lavender through vivid violet to deep purple.

A saturated purple progression suitable for accents, illustration, and expressive product surfaces.

Purple gradients can move from lavender to deep violet while staying cohesive, or shift toward magenta/blue for a more expressive result.

Gradient stops

Lavender #C4B5FD 0%
Violet #8B5CF6 50%
Deep Purple #5B21B6 100%

CSS

.example {
  background: linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 50%, #5B21B6 100%);
}

Gradient contrast varies across the surface. Test important text against every area it may overlap instead of relying on a single midpoint color.

Angle previews

90°
135°
180°

Ready-to-use variations

Lavender depth

Light-to-deep violet progression.

linear-gradient(135deg, #E9D5FF 0%, #A855F7 50%, #6B21A8 100%)

Purple magenta

Warmer expressive purple route.

linear-gradient(120deg, #7C3AED 0%, #A855F7 50%, #DB2777 100%)

Purple blue

Cooler route toward blue.

linear-gradient(150deg, #A78BFA 0%, #7C3AED 50%, #2563EB 100%)

Tuning tips

  • Choose a hue direction intentionally: magenta feels warmer, blue feels cooler.
  • Use a neutral card behind text when the gradient is highly saturated.
  • Check banding on large surfaces if stop colors are close.

Blue Purple Gradient

A blue-to-purple gradient moving from saturated blue through indigo to violet.

Rainbow Gradient

A six-stop rainbow gradient moving through red, orange, yellow, green, blue, and violet.

Sunset Gradient

A sunset gradient moving from twilight purple through pink and orange to golden yellow.

Browse all palettes and gradients.