Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

😎👋As promised, I've recreated it on @codepen ✨ I loved making it & animating the gradients🌈 Using: - CSS keyframes ✅ - CSS custom properties ✅ - CSS variables ✅ - NO JS ❌ Link: CrossBrowser incoming ➡️ #css #FrontEndDev

Luky - A$AP Luky

3,373 subscribers

103,364 views • 3 years ago •via X (Twitter)

Education Science & Technology #css #FrontEndDev

Anya Rossi• Live Now

Private livecam show

10 Comments

Luky - A$AP Luky3 years ago

There's some differences from the original design of @aleksliving but I think I got the overall idea! Thanks for the inspiring tweet buddy 🤝

Felix De Montis 🍀3 years ago

@CodePen This looks crazy, love it

Luky - A$AP Luky3 years ago

@CodePen Thanks Felix 🫶

Maslow3 years ago

@CodePen Damn you good bro. Next level CSS skills 🙏

Luky - A$AP Luky3 years ago

@CodePen Haha thanks man, appreciate it, if you dissect the code there’s nothing too complicated, really 😊

tech bloke 3 years ago

@CodePen @TheVunderkind

Aleks3 years ago

Dude this is awesome! You’re nuts 😍

Luky - A$AP Luky3 years ago

Ah! Thanks man, couldn’t get closer to what you designed, really glad you like the result 🙌

マックス👽✨3 years ago

@CodePen I love this!

Luky - A$AP Luky3 years ago

@CodePen Thanks man! 🙌

Related Videos

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

I did it! 100 Unique CSS Patterns 🤩 👉 👈 One of the biggest collection of CSS patterns ever! ✅ One-click to copy/paste ✅ One value to control the size ✅ Optimized with CSS variables Which one is your favorite? Tell me in the comments 👇 #CSS

CSS by T. Afif

29,169 views • 3 years ago

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇

Responsive login form with fun animation ✨ Using HTML, CSS and JS. CodePen link below 👇

Viki ✨

401,492 views • 2 years ago

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥

"can I use it for images?" – Yep! ✅ Could even combine it with CSS scroll-driven animation CSS, am I right? 🔥

jhey ʕ•ᴥ•ʔ

258,794 views • 2 years ago

Responsive funny Credit Card form ✨ Using HTML, CSS and JavaScript CodePen link below 👇

Responsive funny Credit Card form ✨ Using HTML, CSS and JavaScript CodePen link below 👇

Viki ✨

908,892 views • 2 years ago

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI

Pinterest moved to native CSS carousels to replace legacy JS platform-wide → Using CSS primitives like scroll markers and snap, they achieved: 📉 90% code reduction (2k JS → 200 CSS) 🚀 15% faster page loads ✨ Smoother, interactive UI

Chrome for Developers

219,689 views • 3 months ago

Apple Watch recreated with pure CSS + JS The original was made with WebGL in 2015. DOM + CSS in 2025 Insane work by 池田泰延

Apple Watch recreated with pure CSS + JS The original was made with WebGL in 2015. DOM + CSS in 2025 Insane work by 池田泰延

Ali Grids

51,999 views • 23 days ago

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

Little CSS Christmas tree for the holidays 🎄 Powered by CSS custom properties 💪 ~100 lines of CSS The trick is in the animation-delay ✨ For example; <div class=🔴 style="--index: 2;"> .🔴 { animation-delay: calc(var(--index) * -0.2s); } CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

374,796 views • 3 years ago

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

Scroll velocity CSS text-shadow 📜 1. Animate 2 custom properties on scroll 2. Transition one of the property values 3. Use the diff (velocity) for the text-shadow position 🤙 A CSS take on it.

jhey ʕ•ᴥ•ʔ

112,034 views • 2 years ago

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Created this fully "accessible" dropdown using pure Tailwind CSS 🤩 × No javascript × No custom styles Can you guess which CSS property is this?

Surjith S M ✪

169,689 views • 3 years ago

What I coded today as a software engineer! HTML/CSS/JS edition ✨

What I coded today as a software engineer! HTML/CSS/JS edition ✨

˗ˏˋmewtru´ˎ˗

212,770 views • 2 years ago

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇

Responsive HTML table with sticky columns and mobile view created using only CSS and HTML ✨ CodePen link below 👇

Viki ✨

385,899 views • 2 years ago

The CSS trick here is using custom properties to drive your CSS animation behavior 🤙 Doesn't have to be a scroll animation li:nth-of-type(odd) { --x: -4ch; } li:nth-of-type(even) { --x: 4ch; } @keyframes shift {50% { translate: var(--x) 0; }} Updates at runtime 🚀

The CSS trick here is using custom properties to drive your CSS animation behavior 🤙 Doesn't have to be a scroll animation li:nth-of-type(odd) { --x: -4ch; } li:nth-of-type(even) { --x: 4ch; } @keyframes shift {50% { translate: var(--x) 0; }} Updates at runtime 🚀

jhey ʕ•ᴥ•ʔ

239,989 views • 2 years ago

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

Future CSS Tip! 🔮 You can power list animations like you would using IntersectionObserver with CSS scroll-driven animations and zero JS 🤯 el { animation: show; animation-timeline: view(); animation-range: entry; } keyframes show {0%{translate:0 50%;}} CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

433,664 views • 2 years ago

Really cool CSS gradient border effect I recreated after seeing it on the warp website. Demo: Code:

Really cool CSS gradient border effect I recreated after seeing it on the warp website. Demo: Code:

Wes Bos

188,168 views • 3 years ago

Ark UI is now available in Svelte 5 🔥 ✅ 45+ accessible, unstyled UI components ✅ Works smoothly with Svelte primitives ($effect, _$state, $derived) ✅ Style every component in your way (Panda CSS, Tailwind, CSS Modules) 👉🏽 Check it out here

Ark UI is now available in Svelte 5 🔥 ✅ 45+ accessible, unstyled UI components ✅ Works smoothly with Svelte primitives ($effect, _$state, $derived) ✅ Style every component in your way (Panda CSS, Tailwind, CSS Modules) 👉🏽 Check it out here

Sage ⚡️

13,189 views • 1 year ago

Man I love this cool effect with CSS Conic gradients!

Man I love this cool effect with CSS Conic gradients!

Wes Bos

163,476 views • 1 year ago

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

curved scrollbar: completed it ✅ CSS + SVG to animate stroke-dashoffset combined with scroll-snap

jhey ʕ•ᴥ•ʔ

229,845 views • 1 year ago

it's all about easing curves ⏱️ translation powered via CSS custom properties

it's all about easing curves ⏱️ translation powered via CSS custom properties

jhey ʕ•ᴥ•ʔ

64,278 views • 1 year ago

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

here's the exploded view of what's happening 🤙 powered by one CSS custom property, transition grid-template-columns for the digits ⚡️ few lines of JS to make it work in other browsers ✅

jhey ʕ•ᴥ•ʔ

285,140 views • 1 year ago