Techniques
Radial Glow Accent
Linear's marketing pages use a subtle radial gradient glow behind hero sections — a violet-to-transparent bloom that provides atmospheric depth without decorating the UI surface itself.
.radial-glow {
position: absolute;
inset: 0;
background: radial-gradient(
ellipse 60% 50% at 50% 0%,
rgba(94, 106, 210, 0.15) 0%,
rgba(94, 106, 210, 0.05) 40%,
transparent 70%
);
pointer-events: none;
}
Near-Invisible Border Row
Linear's signature list rows use borders so faint they're almost subliminal — just enough to separate items without creating visual noise. The border color matches the subtle background tier.
.list-row {
display: flex;
align-items: center;
padding: 6px 12px;
border-bottom: 1px solid #1c1d1f;
transition: background-color 100ms ease;
}
.list-row:hover {
background-color: rgba(255, 255, 255, 0.03);
}
.list-row:last-child {
border-bottom: none;
}
Command Palette Overlay
Linear's ⌘K command palette — a dark, centered modal with a search input and instant-filter results, the signature interaction pattern of the app.
.command-palette {
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
width: 560px;
max-height: 420px;
background: #111213;
border: 1px solid #1c1d1f;
border-radius: 12px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
overflow: hidden;
animation: palette-in 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.command-palette input {
width: 100%;
padding: 14px 16px;
background: transparent;
border: none;
border-bottom: 1px solid #1c1d1f;
color: #f7f7f8;
font-size: 15px;
font-family: 'Inter', sans-serif;
outline: none;
}
@keyframes palette-in {
from { opacity: 0; transform: translateX(-50%) scale(0.98); }
to { opacity: 1; transform: translateX(-50%) scale(1); }
}