Techniques
Blurple Gradient Hero
A multi-stop gradient sweep used in Discord's marketing hero sections — blurple to fuchsia — giving the dark canvas a vibrant, atmospheric glow.
.hero-gradient {
background: linear-gradient(
135deg,
#5865F2 0%,
#7B68EE 35%,
#EB459E 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-bg-gradient {
background: radial-gradient(
ellipse at 30% 50%,
rgba(88, 101, 242, 0.3) 0%,
rgba(235, 69, 158, 0.15) 50%,
transparent 80%
);
}
Layered Dark Surface Stack
Discord's three-tier depth system — page, surface, subtle — using only background-color shifts, no shadows. Each layer is visually distinct without any elevation artifacts.
.surface-page {
background-color: #36393F;
}
.surface-sidebar {
background-color: #2F3136;
}
.surface-input {
background-color: #40444B;
border: 1px solid transparent;
border-radius: 8px;
transition: border-color 200ms ease;
}
.surface-input:focus-within {
border-color: #5865F2;
}
Mention Pill Highlight
The inline mention pill that marks @user, @role, and #channel references in chat — a tinted blurple background with matching text that pops against the dark chat surface.
.mention-pill {
display: inline;
padding: 0 4px;
border-radius: 4px;
background-color: rgba(88, 101, 242, 0.15);
color: #dee0fc;
font-weight: 500;
cursor: pointer;
transition: background-color 100ms ease;
}
.mention-pill:hover {
background-color: rgba(88, 101, 242, 0.35);
color: #ffffff;
}