Building Blurry, Animated Background Shapes with Tailwind CSS

[@sayaskye]

Everytime I see any video of Tailwind, I just smile, thanks to everyone who works to make this happen.

[@simonswiss]

Reading this makes me happy! ✨

[@ItsRasor]

I do the same, but then I get sad because I'm short on time and always postpone learning it.

[@mouradaouinat8721]

I just love tailwindcss

[@ammarkhan5658]

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.

[@blueline15]

These videos are a gem. Thank you to the Tailwind team for doing this work and sharing it for free.

[@aswinmohanme]

We need more high level tutorials like this. Keep up the good work 🚀

[@jannickpedersen4620]

Just applied this to my hero intro section, nicely done :D

[@tanaephis]

Tailwind is a masterpiece and this videos are amazing.

[@mohammadDeveloper2431]

I love tailwind and your explain and design sir please more video make for ux ui related like this in next ja and tailwind

[@Balance-8]

I love these videos, they make my day everytime.

[@simonswiss]

That's amazing to hear! 🙏

[@UwU-dx5hu]

Not only I understood tailwind more, I also learned more css. Thank U

[@mc-ty4br]

these tutorials make tailwindcss even more accessible muchas gracias :)

[@a062693069]

I love the "really blurry blur" 🤣

[@las3rtje]

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

[@simonswiss]

That's nice to hear, and encouraging to come up with more ideas like this!

[@SatadruChique]

Amazing effect. I saw and immediately put it on my bucket list.

[@tenc6491]

I love Tailwind CSS. And this channel is a masterpiece.

[@georgebockari4831]

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.

[@Gyooopp]

Can you tell me how can I blur the top of my element in which I'm using backdrop blur it should blend properly

[@saribnoor2105]

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 .😍😍

[@tobiasparent4806]

Absolutely delighted with the capability and flexibility. Haven't played with @layer at all, this was a great introduction to its usefulness. Thanks!

[@lauderday8]

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!

[@DebjitMajumdar]

Masterpiece, I just love tailwind, this was what I was trying to achieve.

[@obedboakyedanquah9114]

This guy makes me happy.

[@khadijamosavi4063]

Really enjoy the power of tailwindcss. A big thanks.

[@zeke2269]

finally found one with tailwind!

[@gwemula]

I'm so glad you exist and do what you do!

[@sayso376]

thanks for another super-simon video. it would be awesome if the snippets/source-code was made available. is it anyway?

[@MogauIsak]

TailwindCss is really impressive

[@Martin-4D]

Tailwind is just superb

[@sabaazarkhah]

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,

[@freeborn4389]

Please which editor do you use, the extensions, theme and how do you preview your page? The curiosity is killing me lol. Thanks

[@hardiklakhalani6268]

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.

[@damaholic22]

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.

[@saschamajewsky7990]

When Tailwind Merch?

[@indrajeet5786]

Just awesome and as always a very nice tutorial from you

[@cryptodev2615]

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.

[@fm_abid]

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.

[@nicolaskeith8872]

I absolutely love these videos. Please, carry on

[@hemantharijan4431]

Thank you for sharing your knowledge through this video great work 👌👌🔥

[@tontonsan3534]

Came for code, stayed for corgi.

[@resin01]

Awesome. Any plans to add animation delay to tailwind itself? Would be nice to be able to use it with jit

[@neverbionic7867]

This is amazing! Thank you!

[@adhecson]

This video made my day, thank you Simon!

[@simonswiss]

My pleasure 🎉

[@dimaudod6089]

Ohh so beautiful corgi!

[@Prajna11]

Thanks for your efforts and great production value on these. Super helpful.

[@simon_leen]

Epic Demo, tailwind rules, keep um coming

[@RihotGusronMunthe]

We need to know what tools you used in the video. Anyway tailwind is revolutionary

[@Lostpanda123]

It's sad that Firefox is still not supporting these effects!

[@devcastro]

looks good and all, i am using it.. but when ever you hover those blobs, you cannot scroll the website anymore..

[@mmikhan]

@Adam gives this man a raise 🙂

[@LaurieKnight1969]

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?

[@andrefgallo]

So cool!

[@sneharshbelsare9481]

What font is being used in this video ?

[@JackHales-s1m]

Really cool!

[@alwy_cheezy75]

Thanks sir, finally i found it

[@billy.n2813]

Thank you very much for this tutorial!

[@Alessandro_Russo]

TailwindCSS is my savior, but PLEASE change the font of your code!

[@learning_with_rj]

Thank you for the video! How many dogs do you have? Is this Queen's Corgi ?

[@simonswiss]

Haha I have two corgis! One is 4 years old, and this one is... 9 weeks old ❤️

[@adrienbird4130]

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.

[@tareekylefraser4058]

did you ever figure it out ? im having the same problem

[@adrienbird4130]

@@tareekylefraser4058 pretty sure I either restarted the project file or moved on. Cant quite recall.

[@tareekylefraser4058]

@@adrienbird4130 well i just solved it.. my jit mode was not setup so that fixed it

[@ang3loux]

Bro you are a genius!

[@boiadeiro8272]

Hey, nice recreation. What about performance of this animations?

[@simonswiss]

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".

[@VS257]

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

[@LucianoTonet]

I love tailwindcss, but write CSS animations via JS config file is something that I don't like.

[@daisya2950]

I'm using Astro with tailwind, and I don't know where to write the animation delays. Can someone help me out?

[@golfcart_9797]

this really helped thanks.

[@arzaak]

Please add a colored drop shadow feature

[@rayzecor]

Cute dog

[@iamviduranishantha]

Love this animation.

[@AllanLeonardJr]

That's awesome!

[@mileslegend]

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

[@AbdulRahim-zb9zm]

that was awesome

[@soultouchingsongs]

Awesome. Thanks a ton for sharing.

[@x0r1k]

Can you add transform rotate, so they move to different directions?

[@kelvinsmith4894]

Yeah you could do that

[@jimmyj.6792]

Magic tailwindcss 🚀🚀

[@andikusnadi1979]

Download source code where ? Thankmu

[@iAmtHeViRuZ]

Is it possible to create this without a framework?

[@dibbyo456]

Loved it

[@AllahomAnsorGaza]

none create dropdown menu with transform i tried many time and didnt work for me please show us with react

[@MsGarfield2703]

Thank you! It's awesome.

[@Troy-ol5fk]

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 ?

[@danielmbi8368]

More of this pls...

[@alexfilus]

Double like for corgi!

[@liabutlermedina3349]

awesome video, thank you so much

[@arunavkhare2733]

Brilliant

[@kukuhsetya5799]

Awesome man 👍

[@pedroffeitosa]

So amazing. Thank you very much!

[@peterelliston]

Great content as always. Does anyone know if there’s a hamburger-style menu with Tailwind?

[@delulu6969]

If you want a CSS-only solution, you can make a checkbox and you translate-x-full the menu. And then combine selector when checkbox:checked .menu to translate-x-0

[@VaibhavShete]

There isn't a ready-made hamburger style menu in tailwind itself, because that would be a 'component' and tailwind deals with 'utilities'. But that means you can easily make one in your own style using the tailwindcss utilities and some custom css (like the checkbox hack) or javascript (many tutorials on w3schools for that). Or you can go for a fully accessible solution using HeadlessUI - Also from the makers of Tailwind. It uses javascript, and is available for frameworks like React and Vue.

[@christostsangaris4785]

This is just perfect

[@曾仕强传承之声]

What development tools are used? Is there a windos version?

[@thanhnguyenhoai2727]

great work

[@marcinzale]

Great! Thanks!

[@kuldeepjaswal4655]

awesome!

[@CARUSAR21]

Just fantastic

[@Sasuke-px5km]

How did you do that "class" word curly?

[@it-s-me-mohit]

Awesome 👍👍

[@sidwebworks9871]

The video was dope as usual🔥, but I guess Simon looks a little unwell, you okay buddy?

[@simonswiss]

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 🙏

[@RandyAllenYo]

Amazing - great video!

[@StefanSchulz1992]

Thanks! It helped me a lot.. keep going on

[@geeno123]

Is there a way to do this with dark mode?

[@AzizMamadiorov]

thanks very useful

[@dhruv9317]

which theme used in vs code name plase??

[@davidattah1629]

God blesss you Bro

[@BrianArtea]

Very cool!!!