Techniques
Aqua Glossy Pill Button
The signature Aqua button: a vertical gradient from highlight to depth with an inner white shine line, creating the illusion of a liquid-filled capsule catching light from above.
.aqua-button {
background: linear-gradient(180deg, #6db3f2 0%, #1e6dd0 100%);
border: 1px solid #1a5bb0;
border-radius: 9999px;
box-shadow:
0 2px 6px rgba(30, 109, 208, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.4);
color: #ffffff;
font-weight: 700;
padding: 8px 24px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.aqua-button:hover {
background: linear-gradient(180deg, #85c1f5 0%, #2578da 100%);
box-shadow:
0 4px 10px rgba(30, 109, 208, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transform: translateY(-1px);
}
Pinstripe Background
The subtle vertical-striped texture that appeared behind every Mac OS X Aqua window, recreated with a 1px repeating gradient.
.pinstripe-bg {
background-color: #fafdff;
background-image: repeating-linear-gradient(
90deg,
transparent,
transparent 1px,
rgba(109, 179, 242, 0.04) 1px,
rgba(109, 179, 242, 0.04) 2px
);
}
Glassy Translucent Card
A semi-transparent surface with backdrop-blur and inner highlight that simulates the layered glass panels of Aqua window chrome.
.glass-card {
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(203, 213, 225, 0.5);
border-radius: 16px;
box-shadow:
0 4px 12px rgba(30, 109, 208, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
padding: 24px;
transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
box-shadow:
0 8px 20px rgba(30, 109, 208, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
transform: translateY(-2px);
}