Techniques
Tonal Surface Elevation
Surfaces gain elevation through primary-tinted overlays rather than dark shadows, creating depth with color warmth.
.surface-level-1 {
background: color-mix(in srgb, #6750A4 5%, #FFFBFE);
box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.10);
}
.surface-level-2 {
background: color-mix(in srgb, #6750A4 8%, #FFFBFE);
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06);
}
.surface-level-3 {
background: color-mix(in srgb, #6750A4 11%, #FFFBFE);
box-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.08);
}
Material Ripple Effect
Touch feedback radiates from the point of contact — a concentric circle of tinted primary that expands and fades.
.ripple {
position: relative;
overflow: hidden;
}
.ripple::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(103,80,164,0.16) 0%, transparent 60%);
opacity: 0;
transform: scale(0);
transition: opacity 100ms ease-out, transform 400ms cubic-bezier(0.2, 0, 0, 1);
}
.ripple:active::after {
opacity: 1;
transform: scale(2.5);
}
Filled Tonal Button
The signature M3 button style: primary-tinted background with on-primary-container text, pill-shaped with no border.
.btn-tonal {
background: #E8DEF8;
color: #1D192B;
border: none;
border-radius: 9999px;
padding: 0 24px;
height: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 0.875rem;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 250ms cubic-bezier(0.2, 0, 0, 1),
box-shadow 250ms cubic-bezier(0.2, 0, 0, 1);
}
.btn-tonal:hover {
background: #D0BCFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06);
}