AI Violet
#1e1b4b · #7c3aed · #c084fc
linear-gradient(135deg, #1e1b4b 8%, #7c3aed 50%, #c084fc 92%)
Gradient gallery
Purple Gradient: CSS gradients, backgrounds, and downloadable images
Purple gradients are strong for creative and AI-related interfaces because they can feel imaginative without becoming too loud. Indigo, violet, plum, and electric blue make the palette more dimensional.
Ready-to-use purple gradient examples
Use purple gradients for AI tools, creative portfolios, feature launches, and editorial modules. Pair with white or near-black text depending on the lightness of the center stop.
Indigo Creative
#312e81 · #8b5cf6 · #22d3ee
linear-gradient(120deg, #312e81 14%, #8b5cf6 50%, #22d3ee 86%)
Plum Editorial
#3b0764 · #a21caf · #f0abfc
linear-gradient(145deg, #3b0764 11%, #a21caf 50%, #f0abfc 89%)
Soft Lavender
#f5f3ff · #c4b5fd · #8b5cf6
linear-gradient(130deg, #f5f3ff 8%, #c4b5fd 50%, #8b5cf6 92%)
Neon Purple Blue
#020617 · #6d28d9 · #38bdf8
linear-gradient(136deg, #020617 8%, #6d28d9 50%, #38bdf8 92%)
Royal Product
#1e1b4b · #4338ca · #e879f9
linear-gradient(128deg, #1e1b4b 10%, #4338ca 50%, #e879f9 90%)
Mystic Night
#0f0524 · #581c87 · #a78bfa
linear-gradient(142deg, #0f0524 10%, #581c87 50%, #a78bfa 90%)
Lilac Glass
#ede9fe · #a78bfa · #60a5fa
linear-gradient(118deg, #ede9fe 15%, #a78bfa 50%, #60a5fa 85%)
Violet Portal Radial
#0f0524 · #6d28d9 · #38bdf8
radial-gradient(circle at 50% 46%, #6d28d9 0%, transparent 44%), radial-gradient(circle at 18% 78%, #0f0524 0%, transparent 44%), radial-gradient(circle at 82% 20%, #38bdf8 0%, transparent 44%), linear-gradient(135deg, #0f0524, #07070d)
Lilac Aura Radial
#ede9fe · #a78bfa · #60a5fa
radial-gradient(circle at 22% 24%, #ede9fe 0%, transparent 44%), radial-gradient(circle at 58% 50%, #a78bfa 0%, transparent 44%), radial-gradient(circle at 84% 76%, #60a5fa 0%, transparent 44%), linear-gradient(135deg, #ede9fe, #07070d)