Gradient stops
Blue
#2563EB 0% Indigo
#4F46E5 50% Violet
#9333EA 100% CSS gradient
Blue Purple Gradient
A blue-to-purple gradient moving from saturated blue through indigo to violet.
A cool high-saturation gradient suited to digital product accents and hero graphics.
Blue-to-purple is a neighboring-hue transition that keeps a cool digital character while giving more hue movement than a monochromatic gradient.
CSS
.example {
background: linear-gradient(135deg, #2563EB 0%, #4F46E5 50%, #9333EA 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
Soft indigo
Lighter version for broad surfaces.
linear-gradient(135deg, #BFDBFE 0%, #818CF8 50%, #C4B5FD 100%) Electric indigo
High-chroma digital accent.
linear-gradient(120deg, #2563EB 0%, #4F46E5 50%, #9333EA 100%) Deep blue violet
Dark route for decorative backgrounds.
linear-gradient(150deg, #1E3A8A 0%, #3730A3 50%, #581C87 100%) Tuning tips
- Indigo can act as a smoother midpoint than a direct blue-to-magenta jump.
- Do not assume white text passes on the lighter variants.
- Use stop positions to decide whether the result feels more blue or more purple.
Related gradients
Violet to Cyan Gradient
A clean violet-to-cyan gradient with a soft violet midpoint and copy-ready CSS.
Blue Gradient
A three-stop blue gradient from pale sky blue through vivid blue to deep navy.
Purple Gradient
A purple gradient moving from light lavender through vivid violet to deep purple.
Rainbow Gradient
A six-stop rainbow gradient moving through red, orange, yellow, green, blue, and violet.