The CSS text-shadow property adds one or more shadows to rendered text, creating contrast or a perceived sense of depth without changing the element’s box. section 13.2.3 section 13.2
Build a shadow from these values:
- Specify the horizontal offset first and the vertical offset second, following x, y order. section 1.4.2
- Add a color, and optionally include a blur radius to soften the shadow’s edges. section 13.2.3
- Do not use inset or spread-radius values; text-shadow does not support them. section 13.2.3
A button with a crisp text shadow
Applying `text-shadow: 1px 1px oklch(40% 0.13 263deg);` gives the button label a dark-blue shadow offset by one pixel horizontally and vertically. Combined with a matching box-shadow, the button gains a hybrid, three-dimensional appearance. section 13.2.3
Listing 13.13 Modern button styles
.button {
padding: 0.8em;
border: 0;
border-radius: 0.5em; #1
font-family: Helvetica, Arial, sans-serif;
color: white;
background-color: oklch(57% 0.11 263deg);
box-shadow: 0 0.4em oklch(40% 0.13 263deg); #2
text-shadow: 1px 1px oklch(40% 0.13 263deg); #3
}
.button:active {
background-color: oklch(53% 0.13 263deg);
transform: translateY(0.1em); #4
box-shadow: 0 0.3em oklch(40% 0.13 263deg); #5
}
Inspect the complete button rule and compare the text shadow with the element shadow and pressed-state changes. section 13.2.3
