3 Level Glassmorphism Design In CSS | CSS Tutorial

In this video, I will introduce to everyone 3 Level Glassmorphism Design In CSS. in the topic CSS Tutorial. glassmorphism design is a form of design that creates a see-through effect when two elements overlap each other. There are many levels of creating glassmorphism in CSS, so which level are you using it at? This video will explain and explain. Upgrade your CSS level.
Steps - By Steps:
00:00 What is Glassmorphism Design?
01:08 Level 1
01:45 Level 2
03:27 Level 3
05:04 Supported browsers
-----
Hello everyone, I'm creating a lot of new projects every day and sharing them 😍, including things you'll love to know about javascript and web Developer, Designer. Subscribe to the channel so you don't miss it ✅.
#css #html #javascript
-----
Theme VsCode I'm Using: • Create Your Own VSCode...
Featured video series
React Js Tutorial: • React JS
Design Slider - Carousel web: • Design Slider - Carous...
E-Commerce Web Coding: • E-Commerce Website Code
Design Parallax SCrolling Effect: • Reponsive Parallax Scr...
Web Applycation Code: • Web Application Code
Javascript Tutorial: • Javascript Tutorial
CSS Tutorial: • CSS Tutorial
Many other impressive videos: / @lundeveloper
Contact With me:
Instagram: / lundev.web
Email: [e-mail]
Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support 😍.
Here, I share all my knowledge about Developer and Web Design including languages ​​such as HTML, CSS, SASS, Javascript, Vue, React, Bootstrap, Tailwind along with clean code techniques and UI UX Design.

[@Alosage.]

Mr Beast AI voice is a horrible choice.....

[@SOMEONE-eq5bu]

Agreed

[@mackit]

It’s like listening an alien pretending to be a human

[@J_u_r_i]

lol i didnt even noticed 😂

[@kadenhansen]

Not to mention illegal.

[@vowel_aeiou]

Guys.... I can't hear sh*t !!! tf are u taking about ?????

[@amndev94]

Just a note for young developers : if you're work is to develop big web apps for clients, you dont need to learn these (coming from a full stack developer). Young designers: learn everything from this guy.

[@p.cnunes7098]

yep, its a sad reality that the highest paying jobs are the most boring LOLOL and unless its a game website... people praise simplicity

[@Aviation_4D]

dude! wanna connect? i am a beginner full stack dev. need some guidance/directions.

[@thecrusader.25225]

​@@Aviation_4DI'm a beginner too. Wanna make projects together?

[@Aviation_4D]

@@thecrusader.25225 do you use discord?

[@Aviation_4D]

@@thecrusader.25225 sure, let's connect.

[@d3manify]

I can suggest adding something like a "border: 2px solid rgba(255, 255, 255, 0.25)" for niceer border and "box-shadow: 0 0px 80px 0 rgba(85, 127, 173, 0.37)". Values depend on the picture, but the idea is clear ;)

[@Ikmat]

excellent! the info's helping a lot for the Glassmorphism Design

[@EugeneKoshelev]

That's beautiful!

[@muskandodmani3579]

your channel is so helpful, amazing display of the content

[@manuelcastillo7623]

Oh I’m lucky today, I’m discover you!! I feel like Cristobal Colón now XD nice video!

[@lundeveloper]

Thank you so much 😍😍😍

[@Tofu-it8mm]

You got a new Subscriber 😇 Nice work dude.

[@lundeveloper]

Geat, Thank you so much ❤️❤️

[@TheMoments-]

I hope if you can expand some more so the beginners can learn and understand 🎉 Thanks

[@hdlrpnzr]

cool, thanks for the tip

[@lundeveloper]

😍😍😍

[@FlavioRicardoDesign]

About the color codes, you can use the HEX color codes too, you just need add the fourth octet, that's represent the alpha channel, like this: #ffffff80, it's same that's rgba(255,255,255,128)

[@whyisthiscodenotworking]

The Mr beast ai sound, The sound effects in the middle of video, The video editing, And the presentation, Code clarity Everything's looking good ! You just earned a sub 🔥🔥🔥

[@kneel.downnn]

Yup that was excellent!

[@irwankaryantotandek6058]

Ok, subscribed!

[@Ayush-_-007]

Great work brother... promise you that i will give you atleast 100 more subs (every one from my class)

[@lundeveloper]

Wow Tha k you so much brother 😍😍

[@rahulkumargautam3358]

using backdrop-filter: blur() also makes the content a little bit blur. I don't use these for this reason.

[@spacemanXVI.]

What do you use instead?

[@rahulkumargautam3358]

@@spacemanXVI. I used to create pseudo element for backgrounds and then use backdrop filter on it. This gives much clearer and better result.

[@DavidGutierrez-dj2kk]

You Rock!

[@marketdilemma]

Heavy editted

[@firstlast493]

This is a great channel!

[@lundeveloper]

Thank you so much

[@danielkubeck6631]

im still new, but when you click on the color wheel theres a slide bar that does basically that same thing as those values you enter at the end, eg 0.3 opacity just drop the left slide bar down

[@wireinet]

Cool! Thanks! One question (not for theme of this video) --- how you create rainbow active tab in vs code? and gradient in the css rules? Looks great!! Thanks for video! Love Glassmorphism!

[@lundeveloper]

You will find the answer in the description of this video

[@sunnymeghrajani5412]

Interesting😃👍

[@petergrijalvagarcia1241]

Damn... The algorithm finally doing some good shit. Nice style u earned a sub 🤙🏻 Thanks👌🏻

[@somarjaber1275]

You are a legend

[@lundeveloper]

Thank you so much bro 🔥🔥

[@thoriq_aulia]

hey buddy, my I know the font you use in website for this video, especially the on on glassmorphism tab. I like it, thank you

[@TiamiyuAbdulsalam]

This guy is not from planet earth, You are so great, Your presentation is Top-notch.

[@Brechtvdh]

The -webkit- should go before the regular in your code. Or am i stupid?

[@user-rb3sw3ku6t]

Very cool! Thanks!

[@lundeveloper]

I'm glad it's useful 😍😍

[@prathamdhas4363]

What is name of background music you used in between the video

[@user-cs7vo3zn1t]

Could you make tutorial how to make this hero section with animation

[@lundeveloper]

Does anyone know how to this code but don't know what it's called? 🤭

[@thehourseman]

i know because i this in every website

[@Fnydo]

Tutorial for creating website like you used.

[@NgocNguyen-bh3qf]

Nice vid, btw are you a Vietnamese? :)

[@lundeveloper]

That's right, hello countryman ^^

[@nustaniel]

Nice video, but man that AI voice is grating. It really hurts my ears. Some constant little sound-hissing in the higher frequencies.

[@paulopma]

Following because of the sudden violin notes 😆

[@lundeveloper]

Next time I will play the violin a lot to get more people to follow me 🤣

[@kitchentaste8705]

please i am new to VS CODE AND I RALLY LIKE URR R VS THEEMEE PLEASE SAY HOW TO DOWNLOAD

[@XCanG]

If you gonna use this backdrop-filter, then you don't need to convert any colors, just use #rrggbbaa or short #rgba notation. And for the future it was a bad recommendation to suggest rgba, because future syntax use just rgb / hsl / hsb / lab / lch / _etc._ like that: rgb(255 255 255 / 30%) or rgb(0 0 0 / .3) This is recommended approach for the future. And when you don't need alpha, just close bracket after 3 numbers.

[@vedbhanushali608]

wow beautiful thank you sir.

[@lundeveloper]

Thank you so much 😍😍

[@CodeingWithHadi]

Everything's looking good ! You just earned a sub because Everything is just crazy good sound effect in the middle of the video make it more Intresting

[@lundeveloper]

Thank you so much bro 😍❤️

[@corentin1574]

In fact, you can use any color format and add transparency by using the color-mix css function. be careful with browser support though

[@theeanon]

So you guys aren't gonna talk about his voice😂

[@jmg9509]

Is that Mr.Beasts voice? Lmaooo

[@hoa-moc-lan3048]

What theme do you use for vscode? I find it very beautiful

[@venkateshmist819]

Plz tell me

[@abcdabcd8605]

I think he had posted a video regarding that

[@denisblack9897]

Omg, someone help me: how to change syntax highlighting to these beautiful gradients?😅

[@muchis]

good enough without the tiktok voice

[@techwake360]

Awesome

[@lundeveloper]

Thank you so much 😍

[@srijansagar1250]

TRULY A LUNDEV

[@DetectiveNoir_]

I see a Tailwind logo on Css file 👀

[@felix_co]

You can add transparent to hex #colors, add level at the end, like #ffffff40 or #dddddd20...

[@lundeveloper]

Thank you 😍😍

[@p.cnunes7098]

text-blue-500/30 .... done, tailwind CSS is king

[@Devloper.mind_]

10 seconds per jo background sound hai uska name kya hai

[@DaysOfUIUX]

Doing daily UIUX, at day 1

[@p.cnunes7098]

Tip from a Fullstack dev(with a job)..... choose 1 Fullstack 4-10 hour long tutorial in react or nextJS... finish it then make it better, work on it for a couple weeks, make it a decent project, make it your own... then choose another 4-10 hour long tutorial ... FULLSTACK apps .... in 6 months you will be proficient in an industry level framework and language(typescript) .....

[@MdRifatAhmedMohammadNaiem]

I was wondering, why MrBeast started making coding related video and the comments cleared it out 🤣

[@mdkawsarali8247]

It is a good video

[@gvsjayanth5671]

Read it as an Indian Heck of a channel name

[@LuongHuynh-pc2jd]

Ủa, dùng bàn phím telex mà studio code nó vẫn nhận dạng được luôn à ông?

[@lundeveloper]

Sao hăm

[@bachnguyen2367]

i see, ưepkit :))))

[@lundeveloper]

Ồ yé :)))

[@bachnguyen2367]

@@lundeveloper tôi cứ nghĩ đây là kênh nước ngoài cho đến khi xem được vid này :V

[@lundeveloper]

@@bachnguyen2367 🫣🫣🫣🫣 Đã bị bại lộ 🫣🫣🫣

[@lunacc9683]

Where do you get the images you use for your website?

[@ChristianJedAluko]

Cool tips. Do you have the source code for this website(I’m trying to learn web development)

[@lundeveloper]

Of course, please subscribe to the channel to see that video as soon as possible 😍

[@sontuphan3055]

yo I caught the “ư”, are u vnmese? lmao

[@lundeveloper]

🫣

[@hjetwd]

replace rgba(0, 0, 0, 0.23) to rgb(0 0 0 / .23)

[@dipereira0123]

Sir, This is not Web Development. THIS IS ART!!! its beautifull!!!!

[@lundeveloper]

Thank you so much brother 😍😍

[@diegocamacho6060]

Development by itself its art

[@uyletruong9091]

Ủa giọng tiếng Anh của anh nghe khác hẳn nhỉ

[@lundeveloper]

Không phải giọng anh nè ^^

[@uyletruong9091]

@@lundeveloper Chắc chi em nghe hơi lạ. Nhưng phong cách này xịn thật ý Cảm ơn anh ạ 🥰

[@divyanshudhruv]

Sir, you always teach and show one of the best tutorials of UI/UX and web design and thats also even better and clearer than most of the videos. Keep it up ✌🏻✌🏻

[@lundeveloper]

Thank you very much, let's try together ❤️❤️

[@divyanshudhruv]

@@lundeveloper Sir, do you have a github account? If so, can you share it,😅

[@Mushashi147]

Can u give the images

[@lundeveloper]

Hi, If you need images in the video, please message me, information is in the description

[@fachihul]

Did you use ai generated audio for this video?

[@Danachew]

If not, Lun has the weirdest inflections and pacing I've ever heard lol. I love these tutorials, but the voice narration is distracting at times.

[@LasTCursE69]

Content is good, but dear god the voice and the sound effects are horrendous..

[@virag-ky]

Why can't you talk with your own voice? 🤔

[@genie_dev]

I hope to never hear this AI voice ever again.

[@silentshadow867]

This is so fucking weird.

[@apps9129]

Why can’t you just use a normal ai voice. It sounds like an alien and the constant shouting makes it hard to listen to.

[@NicolasPL_]

Lmao that editing and voice is horrible. Good video though

[@christianjack1250]

I want to use some of your shopping cart code. But it has bugs. Do you provide paid support? can I email you?

[@lundeveloper]

Of course, I've put contact information in the description.

[@__kyune__]

LOL, bro is using telex while writing code 🫡

[@AmadeuMeniconi]

Garbagio 🤌

[@lundeveloper]

You need to go back to school