Gradient stops
Violet
#5B5CF0 0% Soft Violet
#8B5CF6 48% Cyan
#2DC8E8 100% CSS gradient
Violet to Cyan Gradient
A clean violet-to-cyan gradient with a soft violet midpoint and copy-ready CSS.
A cool, high-chroma gradient suitable for visual accents and hero surfaces.
Violet-to-cyan gradients work well when you want a cool digital transition with a clear hue journey rather than a simple light-to-dark fade.
CSS
.example {
background: linear-gradient(135deg, #5B5CF0 0%, #8B5CF6 48%, #2DC8E8 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 interface
Lighter stops for decorative cards and large surfaces.
linear-gradient(135deg, #C4B5FD 0%, #8B5CF6 46%, #67E8F9 100%) Electric
Higher chroma for hero artwork and accent areas.
linear-gradient(120deg, #7C3AED 0%, #4F46E5 48%, #06B6D4 100%) Deep night
Dark progression suited to decorative dark surfaces.
linear-gradient(160deg, #3B0764 0%, #4338CA 52%, #155E75 100%) Tuning tips
- Use a solid text surface when copy must cross multiple stops.
- Move the midpoint toward the violet side when cyan is visually dominating.
- Test the exact rendered gradient at responsive sizes because the text may overlap different colors.
Related gradients
Blue Purple Gradient
A blue-to-purple gradient moving from saturated blue through indigo to violet.
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.