[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1771570965918.jpg (118.93 KB, 1280x853, img_1771570958365_gon84fmc.jpg)ImgOps Exif Google Yandex

34352 No.1211

found this cool trick for animating gradients in your web design project! it's super simple and looks amazing. basically you use : linear-gradient() with some keyframes magic.

here's a quick example:
div {width:200px;height:15vh;}@keyframes gradientmove {from{ background-position:left top;}to{background-size : cover ;}}

apply this animation like so:

. gradient-text div:nth-child(odd) {animation-name:gradientmove ;/'' other styling ''/}


it's really flexible and looks awesome on hover or as a loading spinner. anyone tried something similar? what did you use it for?

have any cool projects that used this technique in interesting ways?
➡️ share them!

more here: https://1stwebdesigner.com/how-to-animate-gradient-text-using-css/


[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ 🏠 Home / 📋 About / 📧 Contact / 🏆 WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]
. "http://www.w3.org/TR/html4/strict.dtd">