Loading video...

Video Failed to Load

Go Home

Need a gradient border? Use CSS background-clip 🤙 input { background: linear-gradient(canvas, canvas), linear-gradient(120deg, hsl(278, 44%, 73%), hsl(35, 81%, 73%) ); border: 4px solid transparent; background-clip: padding-box, border-box; }

jh3yy's profile picture

jhey ʕ•ᴥ•ʔ

145,823 subscribers

82,376 views • 2 years ago •via X (Twitter)

EducationScience & TechnologyArts
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

you can totally do it with css 🧑‍🍳 use a border mask, layers + overflow: hidden, or other tricks skip animating the gradient though, jus' spin a 1:1 gradient layer 🤙
0:16

you can totally do it with css 🧑‍🍳 use a border mask, layers + overflow: hidden, or other tricks skip animating the gradient though, jus' spin a 1:1 gradient layer 🤙

jhey ʕ•ᴥ•ʔ

285,897 views • 6 months ago

Little progressively enhanced CSS border reveal button using mask && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }
0:19

Little progressively enhanced CSS border reveal button using mask && @​property .border-button:hover { --complete: 100; } .border-button::after { transition: --complete 0.4s; mask: conic-gradient( from var(--from), #000 var(--complete), ); }

jhey ʕ•ᴥ•ʔ

111,340 views • 1 year ago

Hour 97/100 learning motion Light gradient + progressive blur > black background + opacity
0:11

Hour 97/100 learning motion Light gradient + progressive blur > black background + opacity

Vaun Blu

31,696 views • 1 year ago

Neat li'l #CSS gradient trick: A gradient circular chart effect 👀 1. a gradient mask 2. a conic gradient all the details on my blog
0:16

Neat li'l #CSS gradient trick: A gradient circular chart effect 👀 1. a gradient mask 2. a conic gradient all the details on my blog

Adam Argyle

67,503 views • 3 years ago

The Animated gradient background works so well for our recent landing page design project.
0:12

The Animated gradient background works so well for our recent landing page design project.

Basit A. Khan

30,423 views • 8 months ago

🎉 Introducing: Animated Gradient Background for @Framer. Copy and paste into your project, select style from 6 presets or customize your own. Retweet and comment "GRADIENT" and I'll send it.
0:11

🎉 Introducing: Animated Gradient Background for @Framer. Copy and paste into your project, select style from 6 presets or customize your own. Retweet and comment "GRADIENT" and I'll send it.

Framer University

62,535 views • 1 year ago

Shine animations in CSS are actually simple to make. .shine-container { position: relative; overflow: hidden; } .shine-container::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); animation: shine 1.5s infinite; } KEYframe Galaxy Studios shine { 100% { transform: translateX(100%); } } Now you have a reusable shine effect, that you can reuse in any container! If you found this useful, follow for more. ❤️
0:16

Shine animations in CSS are actually simple to make. .shine-container { position: relative; overflow: hidden; } .shine-container::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.25), transparent ); animation: shine 1.5s infinite; } KEYframe Galaxy Studios shine { 100% { transform: translateX(100%); } } Now you have a reusable shine effect, that you can reuse in any container! If you found this useful, follow for more. ❤️

Ali

10,608 views • 26 days ago

Framer February → Day 1 ✨ A quick and easy way to add a smooth, animated, gradient border to a card in Framer. Let's get started ↓
0:11

Framer February → Day 1 ✨ A quick and easy way to add a smooth, animated, gradient border to a card in Framer. Let's get started ↓

Aleks

184,317 views • 3 years ago

Rayen Bahri built a Blender addon around gradient (palette) texturing, making it easier to set up and use this workflow directly inside Blender. 🎨 See the details and background of the tool: #b3d #3dart
0:10

Rayen Bahri built a Blender addon around gradient (palette) texturing, making it easier to set up and use this workflow directly inside Blender. 🎨 See the details and background of the tool: #b3d #3dart

Jettelly Inc.

61,341 views • 1 month ago

quantity picker w/ [type=number] 👨‍🍳 quantity-picker:has(input:invalid):not(:focus-within) { animation: shake; background: hsl(0 100% 50% / 0.14); } aim to guide, not distract, using form control validation css 🤙 (cooler detail is how the num track works though 👀)
0:14

quantity picker w/ [type=number] 👨‍🍳 quantity-picker:has(input:invalid):not(:focus-within) { animation: shake; background: hsl(0 100% 50% / 0.14); } aim to guide, not distract, using form control validation css 🤙 (cooler detail is how the num track works though 👀)

jhey ʕ•ᴥ•ʔ

46,557 views • 5 months ago

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳
0:19

messin' with css frosted + saturated borders using background-clip + backdrop-filter 👨‍🍳

jhey ʕ•ᴥ•ʔ

139,739 views • 7 months ago

Here is the prompt to create a liquid gold nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.
0:15

Here is the prompt to create a liquid gold nav bar :) Have fun experimenting! Create a floating navigation toolbar centered on screen. Dark background, glassmorphism toolbar with blur and subtle border. Core feature - Golden active indicator ring: A sliding highlight around the active button built with 4 CSS layers: Glow - blurred warm gold (#e8af48) behind the ring, opacity: 0.15 Clip container - overflow: hidden, border-radius: 18px - this clips the gradient Rotating conic-gradient - sized 200% and offset -50% so it spins from center. Rotates 4.5s linear infinite. The gradient must be heavily gold-dominant:70% of the gradient = gold tones (#533517 dark bronze → #c49746 warm gold → #feeaa5 light gold) 2 narrow white hotspots (#ffffff, each only ~3% wide) simulating studio light reflections Between each white hotspot, a very thin (~1.5% each) hint of #ffc0cb pink and - blue for subtle chromatic iridescence - these must stay minimal, the ring should read as GOLD not rainbow The pattern repeats twice across 360° for symmetry Inner plate - inset: 2px covers the center, only 2px of spinning gold ring visible. Background matches toolbar. The indicator slides between buttons with bouncy overshoot easing (cubic-bezier(0.34, 1.2, 0.64, 1)). 3 nav buttons (Home, Search, User) with thin stroke icons, separated by subtle dividers. Plus a dark/light theme toggle - sun/moon icons crossfade with rotate+scale. On toggle click, the button bounces up to 1.25× scale then springs back. Add film grain noise overlay and radial ambient glow.

Leon Lin

72,100 views • 3 months ago

Gradient 🖤
0:11

Gradient 🖤

Sabrina dhillon

28,327 views • 1 year ago

compute the gradient
0:12

compute the gradient

Kat ⊷ the Poet Engineer

78,160 views • 1 year ago

Old: just slap a gradient on it New: just use a shader… shader it all
0:11

Old: just slap a gradient on it New: just use a shader… shader it all

Charles Patterson

198,595 views • 4 months ago

Love this gradient cup! 😍
0:19

Love this gradient cup! 😍

Gina🐣

515,391 views • 1 year ago

How to get fixed background - CSS
0:11

How to get fixed background - CSS

Ali Reza

11,389 views • 1 year ago