Reusable CSS "Sticker" Effect

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