Long Cast 45
Shadow & Press · Static · pure CSS
A dramatic 45° cast shadow that stretches and fades behind the text. More theatrical than a flat long shadow.
CSS
/* Long Cast 45 — generated with TEXT-FX
* HTML: just put the class on any element.
* Font: 'Anton', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Anton', sans-serif;
font-weight: 700;
letter-spacing: -1px;
text-transform: none;
}
.text-effect {
color: hsl(128 30% 95%);
text-shadow:
1px 1px 0 hsl(128 60% 10% / 0.863),
2px 2px 0 hsl(128 60% 11% / 0.835),
3px 3px 0 hsl(128 60% 11% / 0.808),
4px 4px 0 hsl(128 60% 12% / 0.78),
5px 5px 0 hsl(128 60% 12% / 0.753),
6px 6px 0 hsl(128 60% 13% / 0.725),
7px 7px 0 hsl(128 60% 13% / 0.698),
8px 8px 0 hsl(128 60% 14% / 0.671),
9px 9px 0 hsl(128 60% 14% / 0.643),
10px 10px 0 hsl(128 60% 15% / 0.616),
11px 11px 0 hsl(128 60% 15% / 0.588),
12px 12px 0 hsl(128 60% 15% / 0.561),
13px 13px 0 hsl(128 60% 16% / 0.534),
14px 14px 0 hsl(128 60% 16% / 0.506),
15px 15px 0 hsl(128 60% 17% / 0.479),
16px 16px 0 hsl(128 60% 17% / 0.451),
17px 17px 0 hsl(128 60% 18% / 0.424),
18px 18px 0 hsl(128 60% 18% / 0.396),
19px 19px 0 hsl(128 60% 19% / 0.369),
20px 20px 0 hsl(128 60% 19% / 0.342),
21px 21px 0 hsl(128 60% 19% / 0.314),
22px 22px 0 hsl(128 60% 20% / 0.287),
23px 23px 0 hsl(128 60% 20% / 0.259),
24px 24px 0 hsl(128 60% 21% / 0.232),
25px 25px 0 hsl(128 60% 21% / 0.205),
26px 26px 0 hsl(128 60% 22% / 0.177),
27px 27px 0 hsl(128 60% 22% / 0.15),
28px 28px 0 hsl(128 60% 23% / 0.122),
29px 29px 0 hsl(128 60% 23% / 0.095),
30px 30px 0 hsl(128 60% 24% / 0.067),
31px 31px 0 hsl(128 60% 24% / 0.04);
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Shadow & Press
- Type
- Static
- Browser support
- All modern browsers
- Capabilities
- pure