Techniques
Frosted Glass Panel
The signature iOS 7 visual — a translucent surface that blurs the content beneath, creating depth without shadows.
.frosted-panel {
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 0.5px solid rgba(0, 0, 0, 0.06);
border-radius: 10px;
}
Hairline Separator
The ultra-thin divider that replaced heavy borders throughout iOS 7, rendered at sub-pixel weight.
.hairline-separator {
height: 0.5px;
background: #C7C7CC;
margin-left: 16px;
}
Tint-Only Button
iOS 7's most controversial UI decision — buttons are just colored text, with no border or fill to indicate tappability.
.tint-button {
background: transparent;
border: none;
color: #007AFF;
font-family: 'Inter', sans-serif;
font-size: 17px;
font-weight: 400;
padding: 8px 0;
cursor: pointer;
transition: opacity 250ms cubic-bezier(0.25, 0.1, 0.25, 1.0);
}
.tint-button:active {
opacity: 0.5;
}