1-Min Web Design Hack: Clipping Gradients & Backgrounds to Text

Learn how to clip background gradients and images to text and headings so you can have a lot more fun with the visual presentation of your typography.

#shorts

*** MY TOOLS ***

*** INNER CIRCLE ***

Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.

⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!

*** SOCIAL ***

[jpk]

Kevin, this format would be great to extend!

[itspraveensharma]

I think you can share and cover a lot of valuable tips with this format

[Jim.Hummel]

These nuggets are gems...useful & tasteful styling and an opportunity to learn/practice CSS. Thanks, Kevin!

[justinsideris]

I feel like this needs a 20 minute explainer (j/k). Funnily enough was looking for this today so nice timing! Can't wait for more.

[odinaka_joshua]

And More, And More, And More Value 🔥 🔥

[kryllyn]

Why not using properties without prefixes? You could easily use color of the text as transparent and background-clip is supported by the webbrowsers... or there's something that I'm just not aware of... ✌

[rhhridoy]

Good Work. but 1 thing, this css are not going to work for all browsers specially old, safari, mozila, if you used -moz- than it might work. as this video used prefix of chrome this css is mainly made for just chrome browser.

[keaton]

Woah. How to do this with bricks, just same code in a heading?

[erling]

nice having the code would be even nicer :)

[derekshort]

Is anybody else seeing a weird color contrast thing on the bottom half? 🤔 Just curious. I’ve watched this video on my large HD TV and my iPhone SE (2022 model). I can see it but it's a little blurry with text shadow or something. 🤷‍♂️