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.

🤌 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

25,301 subscribers

23,445 views • 1 year ago •via X (Twitter)

Science & Technology Education

Anya Rossi• Live Now

Private livecam show

11 Comments

Patrick the LLM Engineer1 year ago

Do you mind sharing a CodePen?

Simon Vrachliotis1 year ago

I should do that yeah! I'll make some time to add a Tailwind Play for each clip.

Alex Casillas —アレックス1 year ago

Beautiful 😍

Simon Vrachliotis1 year ago

🤙🤙

Chris Sev1 year ago

amazing

Simon Vrachliotis1 year ago

Gotta love blurry blobs 😎

John Champ1 year ago

Extra clean, super beautiful! 😍👏

Simon Vrachliotis1 year ago

Thanks ✌️

jhey ▲🐻🎈1 year ago

Love seeing different approaches with Tailwind 👏 For me, I'd likely hoist some of those classes onto the parent to target the children blobs. And then I'd inline some custom properties on them to handle delay and translate across 2 reusable keyframes (x, y) 🤔

Matan Borenkraout 🥬1 year ago

Thanks for this one, I re-did the shadow of the main image on my personal site with your help :)

Simon Vrachliotis1 year ago

Very nice!

Related Videos

🤌 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 ✨

🤌 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

12,802 views • 1 year ago

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

1️⃣ - When a UI library gets popular, every app starts to look the same. How do we solve this? Introducing Styles. A new approach for shipping UI components. Start with Radix UI and Tailwind CSS. Add a style, including shapes, icons & animations. Apply your colors. ⬇️

shadcn

531,969 views • 3 years ago

I have been exploring a good workflow for animations like these and one thing I have been using Blend Shapes a lot! Because of the simpler cutting and needing to adjust the mesh a lot, Blend Shapes have been super handy for managing everything!

I have been exploring a good workflow for animations like these and one thing I have been using Blend Shapes a lot! Because of the simpler cutting and needing to adjust the mesh a lot, Blend Shapes have been super handy for managing everything!

Bila 🐧✨

16,759 views • 2 years ago

css holographic trading card breakdown 🧑‍🍳 a combo of masked layers with mix-blend-mode pointer position drives the scale/translate of the colored gradients 🌈 check the layers 👇

css holographic trading card breakdown 🧑‍🍳 a combo of masked layers with mix-blend-mode pointer position drives the scale/translate of the colored gradients 🌈 check the layers 👇

jhey ʕ•ᴥ•ʔ

83,703 views • 1 year ago

WILD HEARTS Almanac | Gather Your Allies To invite friends to #PlayWildHearts: 1️⃣ Create a session at a campfire 2️⃣ Add party tags (including custom tags) 3️⃣ OPTIONAL: Add search target for friends, or add a password 4️⃣ Let your friends find you, and enjoy the hunt! 🏹

WILD HEARTS Almanac | Gather Your Allies To invite friends to #PlayWildHearts: 1️⃣ Create a session at a campfire 2️⃣ Add party tags (including custom tags) 3️⃣ OPTIONAL: Add search target for friends, or add a password 4️⃣ Let your friends find you, and enjoy the hunt! 🏹

WILD HEARTS S

51,221 views • 3 years ago

You can decorate photos and video in the redesigned media editor – with auto-smoothing lines and dynamic brush widths. New tools let you blur, add shapes and apply text with different backgrounds and fonts – and all users can add custom emoji for extra flair. #TelegramTips

You can decorate photos and video in the redesigned media editor – with auto-smoothing lines and dynamic brush widths. New tools let you blur, add shapes and apply text with different backgrounds and fonts – and all users can add custom emoji for extra flair. #TelegramTips

Telegram Messenger

81,919 views • 3 years ago

he'll be my lab rat for this tutorial...for this you need to understand the basic shapes of what exactly do you lining, otherwise it'll be plain. then i copy the layer, set the blur opacity to 6.0 and lower the transparency to 50%. you add some grad maps if you like

he'll be my lab rat for this tutorial...for this you need to understand the basic shapes of what exactly do you lining, otherwise it'll be plain. then i copy the layer, set the blur opacity to 6.0 and lower the transparency to 50%. you add some grad maps if you like

Rina228🇸🇪🩸🌱ᛉ cmms closed

64,933 views • 6 months ago

Witness some of the stump flying deliveries - a treat to watch. 🤯 1️⃣ Lasith Malinga 2️⃣ Umesh Yadav 3️⃣ Bhuvneshwar Kumar 4️⃣ Mohammed Shami 5️⃣ Lasith Malinga

Witness some of the stump flying deliveries - a treat to watch. 🤯 1️⃣ Lasith Malinga 2️⃣ Umesh Yadav 3️⃣ Bhuvneshwar Kumar 4️⃣ Mohammed Shami 5️⃣ Lasith Malinga

Kshitij

225,105 views • 7 months ago

Introducing Marketplace Connect for OBS. Use and share advanced OBS scene collections in just a few clicks. 1️⃣ Get the plugin 2️⃣ Pick your setup 3️⃣ Install assets 4️⃣ Start streaming Learn more:

Introducing Marketplace Connect for OBS. Use and share advanced OBS scene collections in just a few clicks. 1️⃣ Get the plugin 2️⃣ Pick your setup 3️⃣ Install assets 4️⃣ Start streaming Learn more:

Elgato

363,790 views • 1 year ago

5 priorities for GeM in the decade ahead: 1️⃣ Reaching every district 2️⃣ Deeper AI integration 3️⃣ A seamless, integrated national ecosystem 4️⃣ Faster payments & sustainable procurement 5️⃣ Connecting with universities & colleges

5 priorities for GeM in the decade ahead: 1️⃣ Reaching every district 2️⃣ Deeper AI integration 3️⃣ A seamless, integrated national ecosystem 4️⃣ Faster payments & sustainable procurement 5️⃣ Connecting with universities & colleges

Piyush Goyal

37,857 views • 1 day ago

I pasted the Three.js code from the previous 3D scene in Grok 4 from xAI and prompted it to create a variation with new shapes. The scene leverages custom GLSL shaders for particle behavior and click morphs between shapes. Open source code and workflow in the thread below. 🧵👇

I pasted the Three.js code from the previous 3D scene in Grok 4 from xAI and prompted it to create a variation with new shapes. The scene leverages custom GLSL shaders for particle behavior and click morphs between shapes. Open source code and workflow in the thread below. 🧵👇

Techartist

3,103,961 views • 1 year ago

⚡️Affinity finally has a Blend Tool — and more. My version of the Blend Tool produces much cleaner vector shapes than Illustrator and gives consistent, high-quality results even with complex forms. With the new Claude integration, you can build your own tools in Affinity via scripting and vibe coding. I’ve already made a few that significantly improve my workflow. Might release it later — after some more testing.

⚡️Affinity finally has a Blend Tool — and more. My version of the Blend Tool produces much cleaner vector shapes than Illustrator and gives consistent, high-quality results even with complex forms. With the new Claude integration, you can build your own tools in Affinity via scripting and vibe coding. I’ve already made a few that significantly improve my workflow. Might release it later — after some more testing.

Constantine

28,748 views • 3 months 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

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?

Excited to announce Easing Wizard is now live! 🎉 The ultimate CSS easing editor with support for Bézier, spring, bounce, wiggle, and overshoot! 🚀 🔗 Some key features are: ⚡ Uses linear timing function instead of keyframes 🎢 Multiple curve types ⏸️ Pause between animation previews 🎥 10 preview modes 📚 Large collection of presets 📝 CSS and Tailwind CSS code generation 📊 Linear comparison 🎯 Multiple accuracy levels ➕ Optional extra space for Bézier curves And can you find the hidden easter egg?

Matthias Martin

13,307 views • 1 year ago

Picture Word Inductive Model (PWIM) does wonders for Newcomers 🙌🏽🤩 The process of their English acquisition. 1️⃣ analyze the image 2️⃣ create a list of what you see 3️⃣ form sentences using the list of words 4️⃣ discuss what’s happening in the image 5️⃣ unscramble sentences

Picture Word Inductive Model (PWIM) does wonders for Newcomers 🙌🏽🤩 The process of their English acquisition. 1️⃣ analyze the image 2️⃣ create a list of what you see 3️⃣ form sentences using the list of words 4️⃣ discuss what’s happening in the image 5️⃣ unscramble sentences

Emily Fɾαɳƈιʂ

17,463 views • 2 years ago

Neat #Maya add-on BlendShape Monitor 1.0 helps troubleshoot complex character rigs by displaying the influence of individual shapes as color-coded heatmaps in the viewport Works for facial and full-body rigs #characterrigging #animation #VFX #gamedev

Neat #Maya add-on BlendShape Monitor 1.0 helps troubleshoot complex character rigs by displaying the influence of individual shapes as color-coded heatmaps in the viewport Works for facial and full-body rigs #characterrigging #animation #VFX #gamedev

CG Channel

11,100 views • 6 months ago

This was the first sequence I animated for Dreamworks #Dogman Officer Knight and Greg the dog were secondary characters and had very limited rigs. But using lots of shot sculpting I made it through with some of the more pushed shapes / poses I was aiming for. #animation

This was the first sequence I animated for Dreamworks #Dogman Officer Knight and Greg the dog were secondary characters and had very limited rigs. But using lots of shot sculpting I made it through with some of the more pushed shapes / poses I was aiming for. #animation

Chester Sampson

12,049 views • 1 year ago

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇

CSS Trick! 🤙 What's powering this button effect? One property ⭐️ You can create the effect by placing a button over your content and using mix-blend-mode 🫶 button { mix-blend-mode: difference; 👈 position: fixed; } It's a really easy one to play around with and you can get some pretty interesting results. It certainly adds some visual interest. But, be careful with what images you use and try to make sure your text is still readable 🙏 CodePen.IO link below! 👇

jhey ʕ•ᴥ•ʔ

177,830 views • 2 years ago

CSS & SVG to the rescue for this "Magnifying" animation? 🚀 The trick: Animate the <feImage> position within a filter and use it for an <feDisplacementMap> 😎

CSS & SVG to the rescue for this "Magnifying" animation? 🚀 The trick: Animate the <feImage> position within a filter and use it for an <feDisplacementMap> 😎

jhey ʕ•ᴥ•ʔ

93,589 views • 2 years ago

Benefits of Merging the Rail Budget with the Union Budget 1️⃣ Assured adequate funding for projects 2️⃣ Year-round project approvals & new services 3️⃣ Greater transparency

Benefits of Merging the Rail Budget with the Union Budget 1️⃣ Assured adequate funding for projects 2️⃣ Year-round project approvals & new services 3️⃣ Greater transparency

Ashwini Vaishnaw

27,036 views • 4 months ago