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

Comments

[Vaibhav Khulbe]

Wow, never used clamp before. Looks like an interesting property! Great work 🔥

[Davey]

Wow, that's amazing that you can do that with CSS. Thanks for sharing.

[Tom Holloway 🏕]

CSS variables are awesome. Nice work!

[negue]

what a nice effect 👀

[Jose Luis Ramos T.]

Saludos y gracias.

[Suresh Thotakura]

Very nice.