Inspired by Jason Lengstorf’s “Boop” graphic, I was curious if I could reproduce the sticker-like appearance with only CSS.
I got very close, then asked for help on Twitter where Lynn Fisher saved the day thanks to her expertise in CSS art. Taking cues from her adjustments and a comment from Adam Kuhn, I extended it to a reusable .sticker
class.
Check it out to learn how to use the following modern CSS properties:
- CSS variables
- Grid - “It’s not just for page layout, kids!”
-
clamp
for fluid type sizing relational to the viewport - Gradient text created with
-webkit-background-clip
and-webkit-text-fill-color
- Solid text borders with
-webkit-text-stroke