Can I recreate Stripe’s text effect?

Stripe has a cool text effect, so let’s dive into how they created it, and see if we can’t try to copy it!

🔗 Links


⌚ Timestamps
00:00 - Introduction
00:25 - Getting started
01:37 - The background gradient animation
01:41 - Fast motion starts
01:54 - Fast motion ends
03:15 - Fast motion starts
03:37 - Flashing starts
03:42 - Flashing ends
03:46 - Fast motion ends
03:47 - Positioning the background
06:53 - Trying a simple solution
08:06 - Seeing how Stripe did it
10:55 - Setting up the effect - first attempt
16:22 - Setting up the next - getting it right
24:36 - Improving readability with a custom property
26:20 - Do you like this style of video?

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[whitetoggled]

CSS never ceases to amaze me, the amount of things you can make with it, the only limitation is your curiosity

[darkbluebossa]

Cool! I would love to see more ´real world´ examples. Sometimes I enter in these inspiration websites and I don´t even know the name of the effects some websites are using (it´s hard even to search for tutorials)

[ThatRobHuman]

a mix-blend-mode of overlay is often a good starting point. It has an appreciably effect when the source layer is practically any color (except mid-tone grey).

[UrbanJackJr]

The reason the codepen js worked is because the code wasn't in strict mode. You used vite and your js file was a module, and modules are strict by default.

[okawashingo]

Reverse engineering is always insightful. Thanks, Kevin, as always!

[mohasinkr]

Your ability to find mistakes in your approach before you even start writing code is super awesome!...it's like having a CSS compiler on your head. Great content as always ♥️

[thec-m]

This channel popped up in my recommendations and I'm glad it did. I have limited CSS knowledge, but this video was surprisingly relatively easy to follow.

I'd be interested in seeing more videos where you reverse-engineer effects on other sites. CSS can be overwhelming, especially when viewing source code on professional sites, but this makes it easier to understand.

[Rogue_Shark]

I think the reason why console was showing x & y -> not defined is because you have to define (use let) inside the bracket syntax of the for loop instead of defining those variables in the global scope. Nice insightful video btw Kevin!

[LustForSilence]

I love how u told us in the beginning for the flashing lights. I felt like being cared for ❤

[Alejandro]

As a beginner this video blew my mind, thanks Kevin, please keep doing this kind of videos.

[SuperYoda]

This is so I built something very similar using this tutorial for my portfolio website. The result amazes everyone! Thank you so much for sharing.

[barmolino]

Nice last few month I am hooked to the animations

[wlockuz]

Really fun video Kevin! Hope to see more real world CSS reverse engineered!

[LeonVisnaw]

That was fun to watch and would love a bit slower paced so that I could follow along and recreate. Either way, this has been saved into my education folder to go over again.

[TheStoicGuide]

Thank you for your video! Please keep making this sort of videos.

[FuzailShaikh]

Man, I really appreciate you making videos like this. Great work 👏

[MrAlexVelik]

Thank you for making CSS accessible for the younger generation of developers!

[lilMnky]

I always learn so much from these videos, Kevin is goated

[killeriller]

Beautiful! You're a true wizard Kevin. I will definately use this somewhere!

[dave_jones]

Some great nuggets in this video, thanks for showing your process a bit, too. It's great to see experts struggle like the rest of us from time to time :)