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.

Animate gradient background for your UIs! 💜

Jan Mraz

108,617 subscribers

11,984 views • 1 year ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

8 Comments

Jan Mraz1 year ago

Ready to become a professional UX/UI designer? Check out my courses on the link on my profile, now available with huge discounts! 🚀

RedDeer.Games4 years ago

Customise the colours yourself or simply connect the Joy-Cons ! Head to ➡️ for more details about #AAAClock ! #indiedev #indiegame #IndieGameDev #nintendo #OLED #switchOLED

OGviews1 year ago

@Ojieditor_UI

Teso's Finest1 year ago

@khaalid__UG

Jarar Malik | UX Designer1 year ago

Thanks for highlighting that plugin my guy, will definitely be using it in the future!

Subarno Paul1 year ago

Thanks for sharing

Nasir Uddin1 year ago

Animated gradients add life to any UI! Love this.

Fahad ibn Sayed1 year ago

Small details, big impact!

Related Videos

CSS placeholder shimmer ✨ - overlay a placeholder element – show when :placeholder-shown – use mask for the border – background-clip for the text - animate the gradient position love playin' with these 🧑‍🍳

CSS placeholder shimmer ✨ - overlay a placeholder element – show when :placeholder-shown – use mask for the border – background-clip for the text - animate the gradient position love playin' with these 🧑‍🍳

jhey ʕ•ᴥ•ʔ

46,356 views • 1 year ago

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

CSS Trick! ⭐️ You can animate your gradient borders by defining types for your custom properties with @ property 🔥 1. Define a property @ property --angle { syntax: ' '; /* 👈 type angle*/ inherits: true; initial-value: 0deg; } 2. Animate the value article { animation: rotate 2s infinite linear paused; } @ keyframes rotate { to { --angle: 360deg; } } 3. Use the value in your conic-gradient background. article { --gradient: conic-gradient(from var(--angle), ...); background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } 4. Change the play state to running on :hover, etc. article:is(:hover, :focus-within) { animation-play-state: running; } That's it! 🤙 As soon as Firefox 120 lands, this one will work in all browsers! 🙌 Until then, it's a progressive enhancement. You will still get the brightening of the border on hover, etc. That's handled with a pseudo-element ✨ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

258,625 views • 2 years ago

rainbow button w/ CSS animation-composition + hue interpolation 🌈 you can create a rainbow gradient as easy as: linear-gradient(in lch longer hue, red 0 0) animate the background-position but speed it up on :hover by using animation-composition: add 🤙

rainbow button w/ CSS animation-composition + hue interpolation 🌈 you can create a rainbow gradient as easy as: linear-gradient(in lch longer hue, red 0 0) animate the background-position but speed it up on :hover by using animation-composition: add 🤙

jhey ʕ•ᴥ•ʔ

98,225 views • 1 year ago

Create this gradient background❄️. In under-1min⏰.

Create this gradient background❄️. In under-1min⏰.

ENDLESS

23,198 views • 4 months ago

UI/UX Designers, you can now create unlimited animated gradient videos without paying a single cent. I just found this website called Krumzi, a simple but powerful animated background generator that lets you create smooth, eye-catching gradient videos for free. Perfect for landing pages and hero sections. Can’t believe it’s free; bookmark it for later. 💜

UI/UX Designers, you can now create unlimited animated gradient videos without paying a single cent. I just found this website called Krumzi, a simple but powerful animated background generator that lets you create smooth, eye-catching gradient videos for free. Perfect for landing pages and hero sections. Can’t believe it’s free; bookmark it for later. 💜

Abraham John 🦄🦓

40,240 views • 5 months ago

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

Future CSS Tip! 🍏 You can combine scroll-driven animations with background-clip to create gradient text reveals 😍 p { animation-name: move-bg, fade-in; animation-fill-mode: both; animation-timing-function: linear; animation-timeline: scroll(root); animation-range: 0 100vh, 40vh 100vh; } /* Multiple animations with shared timeline and different ranges 👀 */ keyframes move-bg { to { background-position: 50% 100%; } } keyframes fade-in { 0% { opacity: 0; } } The trick here is creating a large background with a radial gradient and using background-clip: text on the element with color: transparent ✨ p { background: radial-gradient(50% 100% at 50% 100%, hsl(var(--accent, 10) 90% 95%), hsl(var(--accent, 10) 90% 50%), transparent 50%); background-size: 400% 600%; -webkit-background-clip: text; background-position: 50% 0; } Then we animate the background-position to reveal the colorful part that reveal the text 😎 Another #AppleEvent related scrolling demo coming tomorrow 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

180,112 views • 2 years ago

🚀 Just built this cool carousel! - Background gradient by DevL∞p's Nitro Palette - Gradient blur inspired by Brice Zele's React Native Gradient Blur And yes, Expo is the backbone making it all possible Had to try it out. Here it is! 🙌

🚀 Just built this cool carousel! - Background gradient by DevL∞p's Nitro Palette - Gradient blur inspired by Brice Zele's React Native Gradient Blur And yes, Expo is the backbone making it all possible Had to try it out. Here it is! 🙌

Arunabh Verma

13,326 views • 1 year ago

Do this now to be eligible for Gradient allocation. Drop your gradient invite link in the comment. Retweet so your friends can be aware of this update. Start Here:

Do this now to be eligible for Gradient allocation. Drop your gradient invite link in the comment. Retweet so your friends can be aware of this update. Start Here:

Marjid Cryptonite

156,995 views • 1 year ago

*.･ﾟ✧ vtuber background illustration ✧･ﾟ.* 💜 for secret and dear client 😈

.･ﾟ✧ vtuber background illustration ✧･ﾟ. 💜 for secret and dear client 😈

ame

47,106 views • 1 year ago

Stop guessing your gradient colors

Stop guessing your gradient colors

Zander Whitehurst

126,237 views • 4 months ago

AND LAST BUT NOT LEAST…LUMITY!! 💚💜 THANK U ALL SO MUCH FOR YOUR SHIP SUGGESTIONS 😭💝❤️ THEYVE BEEN A BLAST TO ANIMATE 🥺 #TheOwlHouse

AND LAST BUT NOT LEAST…LUMITY!! 💚💜 THANK U ALL SO MUCH FOR YOUR SHIP SUGGESTIONS 😭💝❤️ THEYVE BEEN A BLAST TO ANIMATE 🥺 #TheOwlHouse

💫 SpacePancakes 🥞

453,104 views • 1 year ago

Once you try Framer shaders, flat backgrounds feel illegal 😂 Built this Pet Avatar hero with 3 of them: 1. Holo for Background 2. Liquid gradient for Text 3. Chromatic Aberration for Button

Tran Mau Tri Tam ✪

50,626 views • 2 months ago

Seyi Vibez’s New Background Vocalist Andrada Recording Vocals for “AMA” 🥹💜

Seyi Vibez’s New Background Vocalist Andrada Recording Vocals for “AMA” 🥹💜

HYPETRIBE

64,374 views • 7 months ago

Quick tip for my graphic designers, In Ps, drop in your photo. Filter ➔ Camera Raw Filter. (Color) -100 Saturation. (Effects) Clarity +40, Texture +55. Gradient map— choose a color. Click the gradient layer mask. Select, Color Range, and click around. Gradient Mesh.

Quick tip for my graphic designers, In Ps, drop in your photo. Filter ➔ Camera Raw Filter. (Color) -100 Saturation. (Effects) Clarity +40, Texture +55. Gradient map— choose a color. Click the gradient layer mask. Select, Color Range, and click around. Gradient Mesh.

Seso

159,083 views • 2 years ago

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

CSS Trick! ⚡️ You can create gradient borders by using transparent borders 👀 No extra elements 🤙 article { background: // layer them up with different origin! linear-gradient(var(--bg), var(--bg)) padding-box, var(--gradient) border-box; border: 4px solid transparent; } The trick is to layer background images using different background-origin ⭐️ Then use a transparent border to define how thick the border is! padding-box positions a background relative to an element's padding. border-box positions a background relative to the border-box 🔥 The ✨magic✨ part? You get that nested radius for free 😅 Check out the exploded view in the video and have a play with different values in the demo 🎞️ CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

646,445 views • 2 years ago

Calf - Adaptive UIs for Compose Multiplatform apps (

Calf - Adaptive UIs for Compose Multiplatform apps (

Android Dev Notes

23,409 views • 2 years ago

Perfect gradient for drainage

Perfect gradient for drainage

Science girl

19,838,695 views • 2 years ago