Building Blurry, Animated Background Shapes with Tailwind CSS
Вставка
- Опубліковано 6 лют 2025
- In this video, you'll learn how to recreate this cool blurry, animated shape effect I noticed on the Qoals landing page the other day! We'll do it with a combination of CSS filters, mix-blend-mode, and custom animations.
Source code: play.tailwindc...
Inspiration: qoals.com
Everytime I see any video of Tailwind, I just smile, thanks to everyone who works to make this happen.
Reading this makes me happy! ✨
I do the same, but then I get sad because I'm short on time and always postpone learning it.
I just love tailwindcss
These videos are a gem. Thank you to the Tailwind team for doing this work and sharing it for free.
We need more high level tutorials like this. Keep up the good work 🚀
When I started tailwind in 2019 it was totally new, no community and was hard to integrate, but now it has improved so much and in all of my projects I am using tailwindcss.
I love these videos, they make my day everytime.
That's amazing to hear! 🙏
Tailwind is a masterpiece and this videos are amazing.
these tutorials make tailwindcss even more accessible muchas gracias :)
Just applied this to my hero intro section, nicely done :D
Tailwind is sooo freaking awesome my stomach hurts just thinking about it. Why did we ever write raw css. Thank you Adam and the team and thank you sir for the great videos on how to leverage this great tool.
Love this content that's a bit more than just "here's how to use the new features of tailwind", really really cool and helpful
That's nice to hear, and encouraging to come up with more ideas like this!
I love Tailwind CSS. And this channel is a masterpiece.
Not only I understood tailwind more, I also learned more css. Thank U
I love tailwind and your explain and design sir please more video make for ux ui related like this in next ja and tailwind
This tutorial solidifed my love for Tailwindcss more
Thank you sir
u make these animation as simple as it look tough .like when i see it look dificult to other web how people create this but i have learned it from u great .😍😍
These videos always give me lots of great ideas for potential designs I could use and shows just of how much Tailwind is capable. Thanks a lot for that!
Absolutely delighted with the capability and flexibility. Haven't played with @layer at all, this was a great introduction to its usefulness. Thanks!
I'm so glad you exist and do what you do!
Amazing effect. I saw and immediately put it on my bucket list.
I love the "really blurry blur" 🤣
Masterpiece, I just love tailwind, this was what I was trying to achieve.
This guy makes me happy.
Really enjoy the power of tailwindcss. A big thanks.
finally found one with tailwind!
I absolutely love these videos. Please, carry on
Thank you for sharing your knowledge through this video great work 👌👌🔥
TailwindCss is really impressive
Thanks for your efforts and great production value on these. Super helpful.
Just awesome and as always a very nice tutorial from you
@Adam gives this man a raise 🙂
This video made my day, thank you Simon!
My pleasure 🎉
Epic Demo, tailwind rules, keep um coming
So cool!
your a master...your amazing and because of that i will give you a like and a subscribe so that i dont miss out on any of your content
Really cool!
Thanks sir, finally i found it
Bro you are a genius!
Ohh so beautiful corgi!
Tailwind is just superb
This is amazing! Thank you!
Awesome man 👍
Magic tailwindcss 🚀🚀
That's awesome!
Thank you very much for this tutorial!
thanks for another super-simon video. it would be awesome if the snippets/source-code was made available. is it anyway?
thankyou for this video but i got a problem which is the objects on top dosn't works after i added divs as a background animate,
that was awesome
this really helped thanks.
I was wondering which program you use to see the output in real time and how are you able to see all the changes without the npm run build?
Thanks! It helped me a lot.. keep going on
Can you tell me how can I blur the top of my element in which I'm using backdrop blur
it should blend properly
So amazing. Thank you very much!
Awesome 👍👍
Loved it
Love this animation.
Another cool one as usual. Hey, why don't you show us how can we make a "Waterfall Grid" layout using TailwindCSS? That would be really awesome.
Thank you! It's awesome.
awesome video, thank you so much
Tailwindcss wooooooooohhh
We need to know what tools you used in the video. Anyway tailwind is revolutionary
Amazing - great video!
Please which editor do you use, the extensions, theme and how do you preview your page? The curiosity is killing me lol. Thanks
Reply after 3 yrs, just in case you are still alive: It's almost like TailwindCSS Playground. Google it and probably first result after the ad.
awesome!
Awesome. Any plans to add animation delay to tailwind itself? Would be nice to be able to use it with jit
This is just perfect
looks good and all, i am using it.. but when ever you hover those blobs, you cannot scroll the website anymore..
Great! Thanks!
Awesome. Thanks a ton for sharing.
When Tailwind Merch?
great work
Just fantastic
Very cool!!!
Cute dog
thanks very useful
Brilliant
The video was dope as usual🔥, but I guess Simon looks a little unwell, you okay buddy?
Haha yeah I am fine! I mean, I just moved houses and have a new puppy that keeps us awake at night - so I may look a bit more tired than usually. I am good though - thanks for checking 🙏
Thank you for the video!
How many dogs do you have? Is this Queen's Corgi ?
Haha I have two corgis! One is 4 years old, and this one is... 9 weeks old ❤️
Does it work on Firefox? Last time I checked they still don't support the blur effect which is kind of a deal breaker, even with a fallback mechanism. I know you can enable support by changing a flag but you can't expect your visitors to do the same.
so good!!!!
What font is being used in this video ?
Perfect 👌
AMAZING
I need help on how to have a backup solution if a user is visiting the website on Firefox and any other browser that does not support filter blue or backdrop blur? On Firefox, you'll just get 3 solid objects on the ground.
Amazing
God blesss you Bro
Hey, nice recreation. What about performance of this animations?
Since we're animating `transform` properties, performance is pretty good on these! It would be a different story if we were animating thing like height, width and other properties that trigger an expensive layout "repaint".
Good question. I tried this animations and the performance in the web page have gone down soooo bad. Even the model web page has some performance issues
I'm using Astro with tailwind, and I don't know where to write the animation delays. Can someone help me out?
Is there a way to do this with dark mode?
Double like for corgi!
I was playing with this and got it basically working, but my existing layout that I want to appear on top of the blobs have the blobs showing through them, what am I missing? I tried specifying the z-indexes but that didn't make any difference, they seem to blend with my content. What did I miss?
Download source code where ? Thankmu
How did you do that "class" word curly?
Is it possible to create this without a framework?
What development tools are used? Is there a windos version?
none create dropdown menu with transform i tried many time and didnt work for me please show us with react
More of this pls...
If i want to blur an element when it's hovered, can i use the duration class with blur to create a transition effect ? Or is there any other way to do this ?
I'm following along with this and it seems that nothing I add to the animation part of the config file is showing up. I've copy pasted the config exactly and animate-blob has no effect while animate-bounce does.
did you ever figure it out ? im having the same problem
@@tareekylefraser4058 pretty sure I either restarted the project file or moved on. Cant quite recall.
@@adrienbird4130 well i just solved it.. my jit mode was not setup so that fixed it
Pls which editor do u use?And can u tell me your editor setup? I do love your editor so much..... Pls..... 😍😍🤗🤗🤩🤩🥺🥺
I'm using vscode with the Night Owl theme and the Dank Mono font ✨