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.

🤌 Glassmorphism with Tailwind CSS 1️⃣ set a semi-transparent background 2️⃣ use `backdrop-filter: blur` 3️⃣ play with the bg opacity, blur level, border and shadow ✨

Simon Vrachliotis

25,289 subscribers

12,802 views • 1 year ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

9 Comments

Falgantil1 year ago

Really love these simple clips that shows how to use CSS properties you might not get to use on a daily basis.

Simon Vrachliotis1 year ago

That's great to hear 🤙

𝗻𝗲𝘅𝘅𝗮𝗶1 year ago

So good!

Simon Vrachliotis1 year ago

✌️

Web Reaper | Website Engineer1 year ago

Definitely a popular effect. Only risk is stuttering if there's a lot of it or the blur is high

Simon Vrachliotis1 year ago

True, use with moderation ✌️

Jon Meyers1 year ago

This is sick! More videos like this please!

Simon Vrachliotis1 year ago

🫡

Leandro Acosta 🇧🇷🇨🇳1 year ago

Whole ERP using this glassmorphism

Related Videos

🤌 Blurry blobs with Tailwind CSS 1️⃣ create a few colorful shapes 2️⃣ add some blur and mix-blend-modes 3️⃣ keyframe the position & size of the shapes 4️⃣ stagger the animation-delay for randomness

🤌 Blurry blobs with Tailwind CSS 1️⃣ create a few colorful shapes 2️⃣ add some blur and mix-blend-modes 3️⃣ keyframe the position & size of the shapes 4️⃣ stagger the animation-delay for randomness

Simon Vrachliotis

23,445 views • 1 year ago

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jus' one more CSS progressive blur demo 🧑‍🍳 backdrop-filter: blur() stack + position: sticky + display: grid for progressive blur on scroll

jhey ʕ•ᴥ•ʔ

44,674 views • 1 year ago

Ghostty can be a floating Liquid Glass panel above your movie. ———————————— background-opacity = 0.0 background-blur = macos-glass-clear macos-titlebar-style = transparent

Ghostty can be a floating Liquid Glass panel above your movie. ———————————— background-opacity = 0.0 background-blur = macos-glass-clear macos-titlebar-style = transparent

Lex Tang

273,881 views • 1 month 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,791 views • 2 years ago

Here's a tip for the new Vertical Streamers! You can source clone your game play and use a composite blur filter to make your backdrop aesthetically pleasing!

Here's a tip for the new Vertical Streamers! You can source clone your game play and use a composite blur filter to make your backdrop aesthetically pleasing!

Miss Dusk ✧Cosmic Enchantress 🌙

64,858 views • 4 days ago

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

CSS Trick 🫠 You can create gooey effects with filter using CSS or SVG if you want color 🎨 .blobs { filter: blur(20px) contrast(30); } .blobs { filter: url(#goo); } The trick is to blur the thing, then cut the blur off with contrast. You can make some cool effects with it ✨ The CSS approach is basic and limits you to black and white. You need to blur the subject and then use contrast to lessen the blur. .blobs { filter: blur(20px) contrast(30); } The SVG approach gives you a lot more freedom. That looks like a lot 😬 What the filter does is take some source and pipe it through different effects. At a high level, you're doing this: 1. Blur the subject with standard deviation "stdDeviation" 2. Mess with the alpha channel values inside feColorMatrix to get the contrast 3. Composite the effects Good thing with SVG filters is you can rinse and repeat and use them on other things 🤙 Have a play with the demo and check out the DevTools where you can see the effects of using different values CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

190,822 views • 2 years ago

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨

more CSS <table> tricks 👇 highlight the row being edited and blur out the distractions table:focus-within tbody tr:not(:focus-within) { filter: blur(4px) saturate(0.2); opacity: 0.5; } bonus: color-mix for accent coloring 🎨

jhey ʕ•ᴥ•ʔ

155,057 views • 1 year ago

need more frostin' for your "glass"? no problem .frosted-glass { background: hsl(0 0% 100% / 0.5); backdrop-filter: url(#displace) blur(12px) saturate(1.8); } increase the background alpha + output blur bump the saturation 🧑‍🍳

need more frostin' for your "glass"? no problem .frosted-glass { background: hsl(0 0% 100% / 0.5); backdrop-filter: url(#displace) blur(12px) saturate(1.8); } increase the background alpha + output blur bump the saturation 🧑‍🍳

jhey ʕ•ᴥ•ʔ

148,525 views • 11 months 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

Making a ✨stacked✨ avatar list using maskImage. Works against any transparent background!! Using Tailwind CSS v4. Recorded and edited using

Alfon

39,397 views • 1 year ago

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

exploded views with CSS grid + 3D transforms 🤙 [data-explode=true] .layer { translate: 0 0 2rem; } .layer:hover .shadow { opacity: 1 } .shadow:has(+ .layer:hover) { opacity: 0.2; } leverage the cascade 🤌

jhey ʕ•ᴥ•ʔ

272,222 views • 1 year ago

Progressive blurs in CSS using pow()/sin() 🤙 1. Create overlay layers 2. Mask and blur based on index using sin()/pow() .layer { backdrop-filter: blur(calc( sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30px )); } Made a sandbox 👇🤓

Progressive blurs in CSS using pow()/sin() 🤙 1. Create overlay layers 2. Mask and blur based on index using sin()/pow() .layer { backdrop-filter: blur(calc( sin(((var(--layers) - var(--i)) / var(--layers)) * 90deg) * 30px )); } Made a sandbox 👇🤓

jhey ʕ•ᴥ•ʔ

75,476 views • 2 years ago

Blur background in photo with photoshop

Blur background in photo with photoshop

Photoshop Tricks!

46,911 views • 1 year ago

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

CSS scroll to unblur text ✨ .word { --start: calc(var(--i) * var(--pxPerWord)); --end: calc((var(--i) + 1) * var(--pxPerWord)); animation: fx; animation-timeline: --section; animation-range: var(--start) var(--end); } @keyframes fx { 0% { filter: blur(20px); opacity: 0; }}

jhey ʕ•ᴥ•ʔ

121,694 views • 1 year ago

Trick to make your art look softer! :3 -duplicate layer -filter -> glitch -> adjust color shift -Gaussian blur -set to lighten (adjust opacity) (Optional) -filter-> unsharp mask for clearer pic

Trick to make your art look softer! :3 -duplicate layer -filter -> glitch -> adjust color shift -Gaussian blur -set to lighten (adjust opacity) (Optional) -filter-> unsharp mask for clearer pic

☆bwun!★| cms closed

130,669 views • 5 months ago

introducing: blur cycle component for Framer use this component to cycle through different words or phrases with a crazy smoooooth blur transition. comment "BLUR" and I’ll send you the component. :)

introducing: blur cycle component for Framer use this component to cycle through different words or phrases with a crazy smoooooth blur transition. comment "BLUR" and I’ll send you the component. :)

Framer University

10,448 views • 1 year ago

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙

Parallax cards with masked blurs v2 ✨ – DeviceOrientation – Progressive blur/masked layers with CSS sin() – Adapts to landscape with media queries 🤙

jhey ʕ•ᴥ•ʔ

495,678 views • 2 years ago

Herramienta CSS para lograr efecto blur con transparencias en tu página web. También te da el código de Tailwind:

Herramienta CSS para lograr efecto blur con transparencias en tu página web. También te da el código de Tailwind:

Miguel Ángel Durán

23,362 views • 1 year ago

quick tutorial (?) on blur with soft edges: if you select using lasso, selection pen etc and gaussian blur, the edges of the blur are sharp but if you use an airbrush to mark the areas on a new layer and use it as selection to blur, you can get a soft effect instead

quick tutorial (?) on blur with soft edges: if you select using lasso, selection pen etc and gaussian blur, the edges of the blur are sharp but if you use an airbrush to mark the areas on a new layer and use it as selection to blur, you can get a soft effect instead

tomato🍅

146,420 views • 5 months ago

Playing with React's <ViewTransition> for cross-page animations in Next.js. It's early and experimental, but very cool! Two tips: • Use a poor man's motion blur for movement `filter: blur(0->10->0)` • Use Chrome's animations devtools to debug

Playing with React's <ViewTransition> for cross-page animations in Next.js. It's early and experimental, but very cool! Two tips: • Use a poor man's motion blur for movement `filter: blur(0->10->0)` • Use Chrome's animations devtools to debug

Delba

160,136 views • 1 year ago