Plasma Violet
linearA vivid plasma gradient from violet to amber.
Going Bold with Plasma Violet
Plasma Violet travels from violet through magenta to amber in three stops, and it is built for moments that need to be felt: app illustrations, brand moments, age-gate screens, and awards pages. The tri-color arc creates a spectrum effect that a two-stop gradient cannot. Keep it to one or two uses per page, because occupying both the hero and the footer with it will exhaust the viewer.
White text works on the violet and magenta thirds but loses contrast against the amber end. Set any text on the amber region in a deep purple or near-black instead. The 135 degree angle spreads the three colors evenly across a square panel; on very wide banners the middle color dominates, so reserve wide usage for cases where that is acceptable.
At the code level, keep the three stops at 0, 50, and 100 percent, or the magenta can swallow the violet. Put the gradient on a single surface and leave the rest of the page neutral, then reuse the middle stop as a button hover color so the transition feels continuous. On tall phone screens the amber third can push below the visible area, so check the preview in portrait, not just landscape. White text needs a dark overlay or a solid badge underneath it on the amber end.
position 0%
position 50%
position 100%
background: linear-gradient(135deg, #7C3AED 0%, #DB2777 50%, #F59E0B 100%);:root {
--gradient-plasma-violet: linear-gradient(135deg, #7C3AED 0%, #DB2777 50%, #F59E0B 100%);
}
.gradient-plasma-violet {
background-image: var(--gradient-plasma-violet);
}<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
<defs>
<linearGradient id="g" x1="14.64%" y1="14.64%" x2="85.36%" y2="85.36%">
<stop offset="0.000" stop-color="#7C3AED" />
<stop offset="0.500" stop-color="#DB2777" />
<stop offset="1.000" stop-color="#F59E0B" />
</linearGradient>
</defs>
<rect width="1200" height="600" fill="url(#g)" />
</svg>