Glowing Background Gradient Effects with Tailwind CSS

In this video, I'll show you how to achieve that awesome glow effect popping up everywhere with vanilla Tailwind CSS utilities.
Inspiration: linear.app
Tailwind Play: play.tailwindcss.com/fNKKyOG2Yv

[@nicolaskeith8872]

what an absolute scoop Adam and the guys made when they hired Simon. what a win

[@simonswiss]

Awwww thank you so much! ❤️

[@nicolaskeith8872]

@@simonswiss no, thank YOU 😊

[@BrucevanZyl]

When I watch your tutorials I realize I know nothing about CSS 😂

[@blueline15]

These quick videos are so worth their time to watch. You find great design inspiration and quickly see the nuts and bolts that holds it together. Thanks for making these.

[@danielChibuogwu]

you can't be more correct, he is so good😍

[@ITTutorials]

I feel so happy whenever I see a new video from you guys. ❤️ 👏

[@altairtodescatto]

Cant help to get amazed of how much tailwind is good. Everything feels almost tailor made in quality. Super intuitive also

[@azam920]

As always high level video output🔥, thanks 👍

[@bbbbburton]

These videos are awesome, keep them coming!

[@levdau]

It's really beautiful!

[@talkathiriify]

Excellent as usual. Thank you so much.

[@somedev1553]

Its good to see u guys uploading again

[@simonswiss]

Yes, happy to be back! ✨

[@mryechkin]

Great stuff as always, Simon! This is really neat. Can we request more pupper appearances in future videos? :D

[@TheSlateDesigns]

These are such great videos. Very nice touches for web apps :)

[@maxpower7735]

Another awesome tutorial, thank you very much! 🥰

[@brad7957]

Awesome! Simple and effective. Thanks for sharing :)

[@zakuguriin4521]

I love love love Emmet snippets. Those devs deserve more love and appreciation.

[@cebuanoninoy]

Wow, that was really good. Thanks!

[@swyxTV]

incredible! til about divide and you explain blur so well! excellent example

[@simonswiss]

Thanks Shawn 🙏

[@antrikshsingh2503]

WOW it looks so clean!!!!

[@adarshchakraborty]

My favourite youtube channel.

[@unamgege]

Awesome tutorial, thanks a lot - using this for my first portfolio iteration :-)

[@amraromoro]

Am always enjoying seeing you Simon brilliant love you man from Egypt.

[@pricklywiggles]

the blur will naturally create a rounding of the grlowing div, you'll find that not rounding it or lowering the rounding border size will look slightly better at the corners

[@DanielDrejerDK]

I love the Tailwind UI. Could you make a video on your design process, to help viewers learn how to make such beautiful components as in your UI kit? I'm kindda struggling every time I need to make something custom :)

[@bossobet4420]

I've been smiling all the time as I watch the video.

[@billy.n2813]

Thank you for making this!

[@learning_with_rj]

So cool tricks! Thank you so much!

[@ayushpaine5650]

Amazing video as always

[@sicktastictv]

Beautiful tutorial!

[@dimaudod6089]

Cool! Thanks a lot for your work!

[@oskioskioski]

What the heck I had no idea about &rarr, that's amazing!

[@phaberest_]

This is darn cool, thank you!

[@simonswiss]

You're welcome!

[@stevemarkperry]

Looks great! Fun video too 👍

[@mc-ty4br]

Thank you for this. I had to do a gradient border for a input[search] once, it wasn't the smoothest experience.

[@furshowten]

Love this effect! I was wondering what extension are you using for the preview window in vs code?

[@wahyusa]

It's awesome, thank you !!

[@ShajidHasan]

Need more of these!

[@tiagooliveira14]

Really incredible.

[@basketberoende]

This is so good!

[@migles1728]

look really cool, thanks for share

[@terry2780]

very nice!

[@belghoulmounder113]

Thanks awesome tutorial as always ! for those who can't see the blur effect just add the utility class "filter" to the div it should work.

[@sanderjn]

Or update your TailwindCSS version :-) I think from v2.2 or so the filter is not needed anymore

[@taheermattur]

It worked man!

[@jamesdavidwyers9110]

The real MVP right here! Thanks! Spent too much time browsing stack overflows and staring at my config files trying to figure out what the heck was wrong. Should've just checked the comments section first. lol

[@NandoPuretz]

muito foda! TailwindCSS é muito top!

[@medAmineRg]

great stuff

[@namnh6320]

Very cool!

[@jagjens]

Great vid 👏

[@tunji_xy]

Awesome trick

[@user-vv5yx5nk7e]

Hi this is cool!) tell me through what extension does the preview work in visual studio?

[@LarsRyeJeppesen]

Very cool

[@MrSonicastra]

Haha, simon the corgi is rwarr! And ofcourse nice video, cool topic!

[@EddyVinck]

Amazing work. Keep these videos coming, they're fun to watch 🎉

[@simonswiss]

&rarrrrrrrrrrrr; 🦁

[@michaelandreuzza]

Hey Simon! Thank you for the video sometimes you read my mind. Just a heads up, the Tailwind Play is missing the class "filter" have a great day!

[@andresdosantos5310]

Tailwind is very amazing.

[@GergelyCsermely]

Thanks :)

[@digitaldata-surveying]

thanks

[@kadupuga3351]

Que cara Bom...tá maluco!

[@Troy-ol5fk]

can I use the z-index classes to place the pink div under the button ?

[@MTRNord]

Just wondering: What is the preview plugin used here? :)

[@imnash21]

The best.

[@azam920]

Waiting day have came

[@andreich1980]

Laughed aloud about → :D

[@Waldolavautnazario]

Why do I have to use the filter utility before blur in my tailwindcss project if the filter utility doesn't appear on the tailwindcss playground example. ?

[@pyari.shayri_]

It was easy and 👍🏻

[@iconekt]

Anyone knows how he get the classNames formatted over multiple lines on save? Im struggling with really long tailwind classes and its hard to find the right one if they are all on one line. Thank you in advance!

[@veryben]

cool

[@tdye]

W's all around

[@tempprofile6715]

RARR indeed!

[@skyzane2735]

How did you setup vscode that you can see immediate / hot reload changes in your index.html?

[@xyangst]

2 months late but he ws using tailwind play

[@suhairhassan]

Cool! as always. One question - How is blur working without applying filter class?. Is that because of JIT or new version of TailwindCSS?

[@simonswiss]

Yep, since version 2.2 we removed the need for a few "toggle" classes like "transform" or "filter" 👍

[@simonswiss]

Yep, since version 2.2 we removed the need for a few "toggle" classes like "transform" or "filter" 👍

[@vadimfedorenko6425]

Your result is event better what they have

[@siddhartha-555]

woah!!

[@dudedigital]

Rawr

[@bangnokia]

it glows in the dark

[@alanaudi7537]

There are two kinds of css library, Tailwindcss and Windicss XD

[@ap9940506]

❤️❤️❤️

[@usmanasif435]

❤️❤️

[@BonyNakhale]

❤

[@stevecastaneda]

I couldn't seem to get this to work until I also added the `filter` class. Is that normal?

[@simonswiss]

You're probably using a version of Tailwind earlier than 2.2? Before then, you needed to add the "filter" toggle class.

[@stevecastaneda]

@@simonswiss Actually just noticed I was using the compatibility version since I'm on create-react-app.

[@thanhnguyenhoai2727]

damn

[@neilbradley9130]

Rarr!

[@oguzakankan518]

2:17 :DDDDDD

[@waldolavaut2800]

→ I died laughing 😂😂😂😂😂😂😂😂😂

[@simonswiss]

Arguably my best contribution to Tailwind Labs 🤣

[@AndersonSousa33]

What is the extension to make classes got on per line like 7:03?

[@moracabanas]

install prettier vscode extension. Protip: mark the "require prettier file" on prettier extension config. Then create a .prettierrc, prettier.config.js or whatever compatible config file format. Go to prettier web page and copy the example config in that file. Then research there about more configs to format. Protip2 install "enable disable format extension" to enable/disable prettier formar on save button

[@moracabanas]

Also every time you start a new project first thing to do is create the same last process then "npx prettier --write . " This will format every js css html file on your proyect. Before formating all js files with that, ensure you add node_modules and all stuff you want to ignore format to .prettierignore. Commit that and start your project. That prevents large commits in the future when you edit a file and commit gets changes and format at the same time

[@alphaO27]

Meanwhile, I still struggle with centering a div 😭😅

[@diyorbeksharipov9407]

Zo'r

[@iflux8821]

Could you please stop “touching” camera every time? Thank you

[@maurobono5324]

Always great content! Thanks. @simonswiss which is the best way in Tailwind to add "smooth scroll" behavior ?