gradientsdark

Royal Purple

Full-page view of this background so you can judge contrast, type, and chrome.

<div className="min-h-screen w-full bg-zinc-900 relative">  {/* Royal Purple Background */}  <div    className="absolute inset-0 z-0"    style={{      backgroundImage: `        radial-gradient(circle at 50% 50%,           rgba(147, 51, 234, 0.2) 0%,           rgba(147, 51, 234, 0.12) 25%,           rgba(147, 51, 234, 0.05) 35%,           transparent 50%        )      `,      backgroundSize: "100% 100%",    }}  />  {/* Your Content/Components */}</div>

background.tsx18 lines · TSX

Related gradients

Cyan Meshdark Pulse Veildark Navy Voiddark Amber Horizondark Deep Washdark Deep Dual Glowdark

Back to library

Forest Emerald Copper & Bronze

gradientsdark

Royal Purple

Full-page view of this background so you can judge contrast, type, and chrome.

<div className="min-h-screen w-full bg-zinc-900 relative">  {/* Royal Purple Background */}  <div    className="absolute inset-0 z-0"    style={{      backgroundImage: `        radial-gradient(circle at 50% 50%,           rgba(147, 51, 234, 0.2) 0%,           rgba(147, 51, 234, 0.12) 25%,           rgba(147, 51, 234, 0.05) 35%,           transparent 50%        )      `,      backgroundSize: "100% 100%",    }}  />  {/* Your Content/Components */}</div>

background.tsx18 lines · TSX

Related gradients

Cyan Meshdark Pulse Veildark Navy Voiddark Amber Horizondark Deep Washdark Deep Dual Glowdark