Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

Animate gradient background for your UIs! 💜

Jan Mraz

108,617 subscribers

11,984 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & Technologie Bildung

Anya Rossi• Live Now

Private livecam show

8 Kommentare

Profilbild von Jan Mraz

Jan Mrazvor 1 Jahr

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

Profilbild von RedDeer.Games

RedDeer.Gamesvor 4 Jahren

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

Profilbild von OGviews

OGviewsvor 1 Jahr

@Ojieditor_UI

Profilbild von Teso's Finest

Teso's Finestvor 1 Jahr

@khaalid__UG

Profilbild von Jarar Malik | UX Designer

Jarar Malik | UX Designervor 1 Jahr

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

Profilbild von Subarno Paul

Subarno Paulvor 1 Jahr

Thanks for sharing

Profilbild von Nasir Uddin

Nasir Uddinvor 1 Jahr

Animated gradients add life to any UI! Love this.

Profilbild von Fahad ibn Sayed

Fahad ibn Sayedvor 1 Jahr

Small details, big impact!

Ähnliche 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 Aufrufe • vor 1 Jahr

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,613 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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

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

ENDLESS

23,198 Aufrufe • vor 4 Monaten

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 1 Jahr

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

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

ame

47,089 Aufrufe • vor 1 Jahr

Stop guessing your gradient colors

Stop guessing your gradient colors

Zander Whitehurst

125,843 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 1 Jahr

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,485 Aufrufe • vor 1 Monat

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 Aufrufe • vor 2 Jahren

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 Aufrufe • vor 2 Jahren

Perfect gradient for drainage

Perfect gradient for drainage

Science girl

19,838,658 Aufrufe • vor 2 Jahren

Calf - Adaptive UIs for Compose Multiplatform apps (

Calf - Adaptive UIs for Compose Multiplatform apps (

Android Dev Notes

23,406 Aufrufe • vor 2 Jahren

We've been cooking design system import for . No more Frankenstein UIs. Your Lovable projects can soon stay consistent—forever.

We've been cooking design system import for . No more Frankenstein UIs. Your Lovable projects can soon stay consistent—forever.

damien

21,342 Aufrufe • vor 8 Monaten