DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Jasmine Gump
Jasmine Gump

Posted on

Gradient typing effect in CSS

Written in CSS.

Top comments (15)

Collapse
 
hnnx profile image
Nejc

Neat :)
I'm getting a bug that cuts off last two letters ("e."), is this a work in progress or am I missing something?

Collapse
 
ntrupin profile image
Noah Trupin

Are you on mobile? I am and the issue is the CodePen window is too small. Just scroll horizontally to see it.

Collapse
 
hnnx profile image
Nejc • Edited on

On the contrary, mobile works fine - I'm able to scroll it. However the desktop version is causing me some issues. Cutting of last two characters and not being able to scroll
btw using chrome Version 78.0.3904.97 on win10

Thread Thread
 
ntrupin profile image
Noah Trupin

I tested in Opera 65 (Chrome 77) on MacOS and it all appears to be working fine. That's a weird issue.

Thread Thread
 
ladyjellington profile image
Jasmine Gump

I developed and tested this on Chrome 78.0.3904.97 as well but on MacOS. It sounds like it may be that particular Chrome version in combination on Windows 10.

Collapse
 
ladyjellington profile image
Jasmine Gump

Exactly what I was thinking!

Collapse
 
ladyjellington profile image
Jasmine Gump

Let me know if @ntrupin 's answer resolves your issue!

Collapse
 
adamwakif profile image
Adam Waฦ˜iฦ‘

Is an amazing work ๐Ÿ˜

Collapse
 
ladyjellington profile image
Jasmine Gump

Thanks!

Collapse
 
fidelve profile image
FidelVe

This is beautiful, thanks for sharing!

Collapse
 
ladyjellington profile image
Jasmine Gump

Thank you!

Collapse
 
gabe profile image
Gabe

Oh wow, this is a really neat effect. The gradient you used is beautiful too. Awesome job!

Collapse
 
ladyjellington profile image
Jasmine Gump

Thank you! Pastels make things look smoother.

Collapse
 
fluffynuts profile image
Davyd McColl

๐Ÿ‘๐Ÿ‘๐Ÿ‘

Collapse
 
ladyjellington profile image
Jasmine Gump

Thanks!!!! :)

๐Ÿ‘‹ New to DEV?

Head over to our Welcome Thread and tell us a bit about yourself!