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.

🚀 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

2,698 subscribers

13,326 views • 1 year ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

11 Comments

Arunabh Verma1 year ago

@BriceZele @expo Be sure to check out Nitro Palette 👇

drinksune2 years ago

Absolutely in love with the review from @xzeldawaifux 😍 She’s rocking it in our ambassador program and earning up to 20% commission on every sale! 💰🎉 Wanna join the fun? Sign up for FREE at 🌟 Drop your unique promo code in the comments 📢💫

Arunabh Verma1 year ago

@BriceZele @expo And this cool repo as well 😎

Expo1 year ago

@endlessFrontend @BriceZele It’s beautiful 🥹

Arunabh Verma1 year ago

@endlessFrontend @BriceZele Thanks a lot! 😊

Towhid Kashem1 year ago

@endlessFrontend @BriceZele @expo I usually use expo linear gradient package with react-native-easing-gradient package to blend images towards the bottom. Going to try the gradient blur method you posted and see how that compares!

Arunabh Verma1 year ago

@endlessFrontend @BriceZele @expo Sure! Do checkout, I just found out about it while I was working and it turns out awesome! 🚀

Jacob C1 year ago

@endlessFrontend @BriceZele @expo Very cool! Looks amazing!

Arunabh Verma1 year ago

@endlessFrontend @BriceZele @expo Glad you think so! ❤️

Sajjad Seyfollah1 year ago

@endlessFrontend @BriceZele @expo Does it work on Android?

Arunabh Verma1 year ago

@endlessFrontend @BriceZele @expo Yes Sajjad!

Related Videos

Built this Fuse inspired carousel today 👀 Saw it yesterday and instantly fell for that blur transition between cards 😍 Had to try it out myself 🤞 Shoutout Expo SDK 53 + Software Mansion Reanimated for making it smooth af 💪 Check the vid 👇

Built this Fuse inspired carousel today 👀 Saw it yesterday and instantly fell for that blur transition between cards 😍 Had to try it out myself 🤞 Shoutout Expo SDK 53 + Software Mansion Reanimated for making it smooth af 💪 Check the vid 👇

Arunabh Verma

41,271 views • 1 year ago

How to blur gradient wallpapers Photoshop tutorial

How to blur gradient wallpapers Photoshop tutorial

Gravvo

14,071 views • 8 months ago

You want to add blur gradients to your website? I've made an easy-to-use, customizable component for @Framer that you can place over any element to apply a blur gradient to it. Retweet and comment "BLUR" and I'll send it.

You want to add blur gradients to your website? I've made an easy-to-use, customizable component for @Framer that you can place over any element to apply a blur gradient to it. Retweet and comment "BLUR" and I'll send it.

Framer University

117,473 views • 2 years ago

GRADIENT Alot of people ask for it so here it is.

GRADIENT Alot of people ask for it so here it is.

Haku

25,174 views • 2 years ago

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

CSS Trick! 🤙 You can create gradient borders on translucent elements using mask-clip and mask-composite with a pseudo-element 🔥 .gradient-border::after { mask-clip: padding-box, border-box; mask-composite: intersect; mask: linear-gradient(transparent, transparent), linear-gradient(white, white); } It's the same "Transparent border trick" from before. But, now you apply it to a pseudo-element 😎 The trick is to create a pseudo-element with a gradient background and then mask it so we only see the part we want, the border ✨ mask-clip defines the area affected by a mask. Similar to how you can define background-size. Using padding-box and border-box constrains the two masks. mask-composite is the magic part ✨ It defines a compositing operation for stacked mask layers. Using intersect means that the parts that overlap get replaced. And this seems to work in all browsers 🙌 As for the rest of the styles... – Make sure you set pointer-events: none on the pseudo-element – Make sure it fills the parent element. You can use position: absolute and inset: 0 – Make sure the background fills the space including the border-width. You can use calc to achieve that: --bg-size: calc(100% + (2px * var(--border))); background: var(--gradient) center center / var(--bg-size) var(--bg-size); That's it! 🚀 Gradient borders on translucent elements. You can set all the backdrop-filter: blur() you like! 😅 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

269,739 views • 2 years ago

Working on improving the pathing module and implementing some tooling for it. The new gradient fill tool lets you easily generate gradient maps.

Working on improving the pathing module and implementing some tooling for it. The new gradient fill tool lets you easily generate gradient maps.

poiyomi

12,308 views • 11 months ago

The most intuitive improvement of the early construction version of Samsung One UI 8.5 is the ubiquitous floating button, translucent matte, and gradient blur. Watch the video.

The most intuitive improvement of the early construction version of Samsung One UI 8.5 is the ubiquitous floating button, translucent matte, and gradient blur. Watch the video.

Ice Universe

106,005 views • 8 months ago

sKiLL ISsUe - but surely there's a better way to do this when getting shot? Tunnel vision but no blur? A gradient of blur increasing towards the edge of the screen? Battlestate Games

sKiLL ISsUe - but surely there's a better way to do this when getting shot? Tunnel vision but no blur? A gradient of blur increasing towards the edge of the screen? Battlestate Games

ThatFriendlyGuy

82,133 views • 2 years ago

its your sign to try gradient maps omg you can see the second it saved my life

its your sign to try gradient maps omg you can see the second it saved my life

nezzu

130,171 views • 5 months ago

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the *depth texture* to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->

I modifyed the official example "compute fluid particles" to make it look more liquid. Simply blur the depth texture to obtain a smooth surface which has differentiable gradient. Made with #threejs live demo (all source code is in html of the page) ->

Maeda Mameo

18,141 views • 11 months ago

and for all you dithered gradient lovers, drew this in figma and then dithered it like whoa

and for all you dithered gradient lovers, drew this in figma and then dithered it like whoa

˗ˏˋ rogie ˎˊ˗

85,065 views • 1 year 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

The process of making a gradient heart cake is super healing

The process of making a gradient heart cake is super healing

Scroll Random

7,897,436 views • 10 months 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,112 views • 3 years ago

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

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

ENDLESS

23,198 views • 4 months 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

How to create this amazing gradient effect in illustrator By shiba_design1

How to create this amazing gradient effect in illustrator By shiba_design1

Rough Draft ©

119,276 views • 3 months ago

Animate gradient background for your UIs! 💜

Animate gradient background for your UIs! 💜

Jan Mraz

11,984 views • 1 year ago