Techniques
Aero Glass Panel
Frosted glass surface effect — the hallmark of Windows Vista's Aero and the entire era's UI language.
.aero-glass {
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.5);
border-top: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 4px 16px rgba(26, 58, 74, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
border-radius: 14px;
}
Sky Gradient Background
The iconic Frutiger Aero sky — a multi-stop gradient with optional radial cloud highlights.
.sky-background {
background:
radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
radial-gradient(ellipse at 70% 40%, rgba(149, 214, 192, 0.15) 0%, transparent 40%),
linear-gradient(180deg, #c8e0f0 0%, #e4f0f8 40%, #f0f8fc 100%);
min-height: 100vh;
}
Glossy Gradient Button
Multi-stop gradient button with white highlight inset — the quintessential Frutiger Aero interactive element.
.glossy-button {
background: linear-gradient(180deg, #7ac8ec 0%, #5cb8e6 40%, #3a9fd4 100%);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 2px 8px rgba(58, 159, 212, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
color: #fff;
border-radius: 10px;
font-weight: 600;
transition: all 250ms cubic-bezier(0, 0, 0.2, 1);
}
.glossy-button:hover {
background: linear-gradient(180deg, #8fd2f0 0%, #6ec2ea 40%, #4aabdc 100%);
box-shadow: 0 4px 14px rgba(58, 159, 212, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
}