Trendy Glass Morphism Effect - Illustrator tutorial

[@JeremyMuradesign]

Love this type of effect?

[@JeremyMuradesign]

@Joaco Make your own video then ;)

[@JeremyMuradesign]

@st1ckm4n 🔥🔥 no fluff here

[@_VishalBhoye]

@@JeremyMuradesign whoa😂, Great thing is that I came to know about how to make gaussian blur. Thank you mate.

[@JeremyMuradesign]

@@_VishalBhoye :)

[@danielnewton2390]

I've been using a lot of gaussian blur and grain overlays in my work recently. I hope this trend sticks around for a while, because I like it!

[@JeremyMuradesign]

Awesome man I like playing with the same it looks good.

[@RobertNowland]

The grain is an excellent touch! Wouldn’t have thought of that. Always thought this effect was super compelling 👊

[@JeremyMuradesign]

Thanks dude yeah really think it's a nice effect!

[@commonaffection1703]

this is pretty cool. like i wouldve never guessed this was possible in illustrator. i mainly do 3d so my workflow would be totally different but more or less the same result. but not having to render it out is amazing.

[@JeremyMuradesign]

Thanks so much, Illustrator is great it can do all the same effects as photoshop which is cool. That is awesome.

[@YS9-9]

Same exact thoughts

[@moskoallstars1234]

you can add gradient to a text without expand the shape, only you need to do is add new fill in the appearance window, next to fx tab. In that way the text keep editable.

[@JeremyMuradesign]

Of course you can do the appearance panel if you want if you want to keep stuff live.

[@obert1000]

Thanks for this amazing Tutorial. Let me turn on my notifications so that i get to see new tutorials on time.

[@JeremyMuradesign]

Awesome, thank you Obert!

[@bysshreyas]

This video was exactly what I was looking for! And your design turned out really really cool! Can’t wait to use this style on my next project. Thanks a lot!

[@JeremyMuradesign]

Yay! Thank you! appreciate teh feedback!

[@HernánTroyo-p3g]

Thank you for the tutorial, clear and helpful🙌🙌

[@JeremyMuradesign]

Glad it was helpful!

[@AntTonyLOLKID]

A tip for the stroke for the "glass"; you could aline the stroke to inside of the shape (by clicking the word "Stroke" on the Control bar - the row of controls below the "File", "Edit"... tabs), rather than changing the gradient.

[@JeremyMuradesign]

Yep that's another good way of doing it!

[@erin758]

lol, that's right. That's all you need to do to fix overlapping stroke

[@kristenclayton2619]

Your video has been the most helpful and efficient by far! Thank you so much

[@JeremyMuradesign]

Glad it was helpful! Kristen :)

[@chome4]

Very creative. So many effects take ages elsewhere, but this was just perfect. And the music didn't drown out your voice!

[@JeremyMuradesign]

Thank you so much I appreciate this comment :). Yeah I thought music was low haha

[@phongnguyen-bs4xw]

I just wanna learn even more now- it looks so cool o.O

[@JeremyMuradesign]

yeh subscribe for more!

[@KVNTA]

Great job man it’s an excellent effect keep up the good work you’re really good

[@JeremyMuradesign]

Thanks a lot Tom :)

[@theaajbranding2406]

It’s an awesome effect. Love the effect. Cool bro.😍🔥

[@JeremyMuradesign]

THANKS BRO!

[@abderrahmanekoriyahia7077]

it worked! thank you so much!!

[@JeremyMuradesign]

You're welcome!

[@omardejesuscampisfontalvo607]

bro thanks so much. dis video is tiless 3 years ltr n still great

[@JeremyMuradesign]

aye cheers Omar glad it helps!

[@김인서-u6y]

Love your design skilllllll~ thank you so much!

[@JeremyMuradesign]

Thank you too!

[@ensenameadisenar2219]

ITS REALLY WORKED LOL THANK YOU DUDE

[@JeremyMuradesign]

Thanks!!

[@hovikabrahamian3801]

Great Tutorial, you did a good job, is a Very Very useful Tutorial. understandable all your explanation. Thank you so much.

[@JeremyMuradesign]

Glad it was helpful Hovik!

[@nicolasmoreno8209]

I also really like softEX, it has a very nice effect to it

[@JeremyMuradesign]

nice

[@scuper501]

It's a surprise skill, thank you for sharing.

[@JeremyMuradesign]

Thank you!!

[@IKSOONLEE]

lovely design

[@JeremyMuradesign]

Thank you! Cheers!

[@lephatdalat]

Thanks... it's working... Good Job...!

[@JeremyMuradesign]

You're welcome!

[@trungnguyen27039x]

nice, thank you so much bro

[@JeremyMuradesign]

Always welcome

[@rather_be_camping]

Awesome tutorial bro. Nice work

[@JeremyMuradesign]

Thanks a ton Nico

[@aior3616]

خدارو شکر عالی هستید خدارو شکر کنید که به اینجا رسیدید

[@JeremyMuradesign]

TY

[@quynhhoa_vlogs8364]

Fantastic video bro, legend.

[@JeremyMuradesign]

Legend! thanks!

[@gabrielamiyuki6197]

Supercool! Thank you for sharing it!

[@JeremyMuradesign]

Glad you liked it Gabriela!

[@doniaelattar345]

thanks mate tNice tutorials was a big help

[@JeremyMuradesign]

Glad it helped

[@dharma4871]

Nicely explained

[@JeremyMuradesign]

Thank you so much 🙂

[@Gabriel-qv7pt]

Tnx for this amazing video, i really enjoy this design style u

[@JeremyMuradesign]

Most welcome Gabriel

[@mentioninglove]

Yesssss!!!

[@JeremyMuradesign]

ty

[@billyman8308]

Thanks, really helped

[@JeremyMuradesign]

Glad it helped Billy!!!

[@aaliswings]

Hi! Thank you, it was very helpful! Is it also possible in Illustrator to add this glassmorphism effect to a png picture (for example with a peaseful landscape)?

[@JeremyMuradesign]

Yeh just put picture under the effect

[@myassin]

I really appreciate your effort, but I got lost at the 5-minute mark and couldn't get the same results as yours. I think showing the layers panel would have helped. Thank you!

[@JeremyMuradesign]

Thanks mate for the feedback maybe watch in slow motion might help

[@SanTTchez]

GG guy, thanks for this tuto !

[@JeremyMuradesign]

Thanks bro

[@rahmatheking]

Good guide for beginners)

[@JeremyMuradesign]

Glad you think so!!!

[@EliezerGrawe]

You don't need to expand the text to apply gradient. Just go to appearence and add another fill above the original fill off the text. Then apply the gradient.

[@JeremyMuradesign]

Yeah you can do everything in appearance if you want to keep things live/editable in this case It didn't matter this is my flow bus.

[@ZACKDEV]

Pretty cool tutorial! I do know if the easier more simple/fast process to create this effect and fully customize the color hand in hand like a preset. Great work though keep it up. 👍

[@JeremyMuradesign]

Thanks Zack, yeah there is easier ways you can do it in XD or figma too but this is just one process of doing it.

[@ZACKDEV]

@@JeremyMuradesign awesome man! Great to hear back from a KZbinr😂 but yes I think figma would be simple too!

[@JeremyMuradesign]

@@ZACKDEV haha yeah bro here I respond to every comment yo! Yeah I'm just an Illustrator geek haha

[@ilysensei2916]

Thanks Bruu

[@JeremyMuradesign]

Cheers bruu

[@Huumok]

Thanks for the tutorial ! :D

[@JeremyMuradesign]

No problem!

[@vlasek_is_back2547]

other desktop soft making software have more features and you can do much more than you can on mobile but the user interface in

[@JeremyMuradesign]

ok

[@SonuMathewNinan]

Thanks a lot for this

[@JeremyMuradesign]

Cheers Sonu!

[@Blaackcreator]

perfect!!!!

[@JeremyMuradesign]

Thanks!!

[@sentionmusic]

Looks sick, subbed

[@JeremyMuradesign]

Thanks Logan you the man!

[@noktos.5883]

good tutorial, one question about soft recording. How do you do it? lol

[@JeremyMuradesign]

I use camtasia, you can use LOOM

[@蔡阳-r1m]

great work

[@JeremyMuradesign]

Thank you! Cheers!

[@velmalai4377]

Appreciated for this video so much but I'm wondering how can i use shape builder without affecting my gradient effect?

[@JeremyMuradesign]

Thanks best thing is to make compound paths, I have a video on that too!

[@velmalai4377]

@@JeremyMuradesign thank you so much!

[@JeremyMuradesign]

@@velmalai4377 ty!

[@e3innovative]

Thank you

[@JeremyMuradesign]

You're welcome

[@שחףבנטוב]

Why don't apply the blurry effect on all of the art board and mask the glass in a way so you can move the glass and still get the effect anywhere you place it?

[@JeremyMuradesign]

You may be able to do it in the appearance panel I just did it this way because i't's easier to understand.

[@carolinahurtado6439]

Thank you! so cool! It works perfect =)

[@JeremyMuradesign]

You're welcome Carolina thanks!

[@karasukrs5910]

Work 100%

[@JeremyMuradesign]

awesome!

[@martapitadelgado2972]

Gracias! It,s help me a lot!

[@JeremyMuradesign]

Glad to hear that! Gracias!

[@PaulDoesIt]

wish there would be live version of this effect

[@JeremyMuradesign]

Ofcourse tell that to #Adobe

[@hutha6652]

Thts what i thinkin about!!

[@JeremyMuradesign]

let's go!

[@victorflorest]

gracias causa

[@JeremyMuradesign]

GRACIAS

[@CarlosJacintoIFUFAL]

All the best,

[@JeremyMuradesign]

ty

[@sidalinettah6580]

great tutorial thanks for the tips buddy would you mind sharing the exact grain settings please i kinda got lost in there and i can't get it quite like yours

[@sidalinettah6580]

never mind i found out what was the problem ^^ thank you

[@JeremyMuradesign]

Awesome :) usualyl keep contrast at like 50 and the use light grain at around 10-20

[@shdesigning8780]

Thanks!

[@JeremyMuradesign]

Thank you my friend!

[@shdesigning8780]

Subscribe to my channel and please share..

[@oaiue_2000]

thank you so muchhh

[@JeremyMuradesign]

Welcome 😊

[@YS9-9]

Why the fuck do you only have 30k subs bro, I mean you got a bit chaotic in there for a moment, but overall this vid was very nice to watch and educational :) Thanks and good luck! You are doing a great job imho.

[@JeremyMuradesign]

Hahah hard bro! Yeah I try and keep it organic not scripted one bit hence a little bit of chaos ;). Thanks man all the best.

[@photocane]

interesting effect, thank you! but isn't it better to show layers tab and adjustments about grain filter?

[@JeremyMuradesign]

Thanks mate, it depends on your style youcan do it that way if you want in the appreance tab.

[@arunkarthik520]

Superb :)

[@JeremyMuradesign]

Thanks Arun🤗

[@elijahdaniel_]

Awesome video. What sucks is that when translated into CSS: backdrop-filter: blur(5px), it's not supported in Firefox (I'm a chrome user but still lol)

[@JeremyMuradesign]

LOL that sucks , Yeh I'm on chrome too!

[@ItzSajjad]

Nice

[@JeremyMuradesign]

Thanks

[@ShadowBanned0]

nice!

[@JeremyMuradesign]

Thank you! Cheers!

[@spitzkopflarry5250]

nice

[@JeremyMuradesign]

Thanks

[@mohamedouattara8734]

🔥🔥🔥🔥

[@JeremyMuradesign]

tytyt

[@scuper501]

謝謝！

[@JeremyMuradesign]

thank you

[@b_q12_b12]

thank u

[@JeremyMuradesign]

You're welcome!

[@VL-yh5hy]

Like background blur in figma)

[@JeremyMuradesign]

yeh similar but not everyoe uses figma

[@garebizarre4446]

Its really fuckin dope Thanks mate

[@JeremyMuradesign]

Thanks bruz

[@Lux_Resort]

Do you have a project download link I can get? I literally cannot figure out illustrator to save my life, I only understand photoshop.

[@JeremyMuradesign]

No download link but you can figure it out follow the tutorial or check my other tutorials on my channel all about illustrator!!

[@ozkanozer83]

how do you make without use raster effects

[@JeremyMuradesign]

You can't

[@vogulz]

I'm having an issue where when I reach the point of using the shape builder tool, the gradient of the object in the background then changes to fit the new shape, rather than maintaining its original spread. Im not sure if I missed a step or what....

[@JeremyMuradesign]

Doiuble check steps, Make it a compound path or go to gradient and click reverse or cahgen graident angle back.

[@ErCapoAlex]

♥️

[@JeremyMuradesign]

♥️

[@HiTiffanyNg]

when i create clipping mask from 4:07... the circle is clipped to the rectangle. And when i do gaussian blur it blurs out all the edge around the clipped circle (in the rectangle selection :( idk why

[@JeremyMuradesign]

use direct selection tool and select the circle inside the mask no the mask itself

[@cyanCubes]

Is this how they did the windows 11 glass design?

[@JeremyMuradesign]

Yes it's glass morphism

[@PaulSmithVPS]

Great tutorial, but please lower the music a tad.

[@JeremyMuradesign]

Thanks mate

[@tonisevabernabeu2961]

👌🏻👌🏻👌🏻💯💯💯

[@JeremyMuradesign]

thanks Toni!

[@xenelectricsba9236]

Hahahaha sae dudee

[@JeremyMuradesign]

haha

[@jhonadrianl]

Is this doable in Ps?

[@JeremyMuradesign]

Yes man similar way of doing it

[@H10933X]

can u plz share the Ai file????? it wud be great help bro

[@JeremyMuradesign]

Maybe

[@Mi-jt6nn]

Друзья пользуйтесь фигмой для решения подобных задач.

[@JeremyMuradesign]

yeh bro!

[@dubaiuxuidesigner]

Desfoq no work :(

[@JeremyMuradesign]

what?

[@haniefpratama3974]

it bugs me that you didn't use the layers window 😂

[@JeremyMuradesign]

Lol I have other videos for that ;)

[@atlaf24]

nozomi ya bang?

[@JeremyMuradesign]

?

[@atlaf24]

@@JeremyMuradesign nah my friend borrowed my phone last time sorry, but your tutorial is helpful thanks man

[@JeremyMuradesign]

@@atlaf24 ahaha

[@teabagNBG]

my computer always starts to lag when i use effects in illustrator....

[@JeremyMuradesign]

Yeah I have a video on how to fix lag on my channel!

[@Estaphet]

How do you realize blured-transparent on css? Backdrop-blur is not useful or maybe not a very professional way because not all browsers support this, say firefox. designers should also think about it. I mean, you also have to know or at least know enough about technical things like this, as a form of responsibility for the next process, namely programming. So, please don't make things that are beautiful but can't be realized properly.

[@JeremyMuradesign]

I understand not sure how to code that in css, you can actually save it as a small transparent PNG/SVG and put it on a website you don't have to use css

[@Plan73]

Nice tutorial, but... have you sardinian ancestors? :)

[@JeremyMuradesign]

Italian background yep

[@Plan73]

@@JeremyMuradesign ok, because I'm italian (from sardinia) and we have the same last name :)

[@JeremyMuradesign]

@@Plan73 Yeah my nonna is from Sardinia!

[@Nitro_Foundry]

So much easier in Figma. Tradeoffs I guess haha Thank you for this!

[@JeremyMuradesign]

Yeah both has pros and cons... Doesn't matter what tool you use man.

[@Nitro_Foundry]

@@JeremyMuradesign Definitely true. Thanks again for a great tutorial!

[@petermain1211]

Or just use background blur in Figma lol

[@JeremyMuradesign]

Lol bruh illustrator is the tool we use here not Figma ;)

[@666MetalRogo666]

That would be 99 percent of us

[@JeremyMuradesign]

lol

[@mienteroso]

That started to get a little hard to follow around the 5 min mark. Good tut nonetheless.

[@JeremyMuradesign]

Yeah a few tricky steps there thanks though Chris

[@金門大學都景系]

I procrastinated for 6 years

[@JeremyMuradesign]

lol

[@ajml6_]

people don't use music in a tutorial videos!

[@JeremyMuradesign]

cool story

[@sYnDaEx]

Its ctrl+V not F.

[@JeremyMuradesign]

CTRL F TO PASTE IN FRONT

[@sYnDaEx]

@@JeremyMuradesign aaah didn’t know that, sorry for the correction then. 👌

[@JeremyMuradesign]

@@sYnDaEx anytime

[@modarresrealy]

Nice to know how its made in AI, but in Figma this would take 10 sec to make

[@JeremyMuradesign]

I don't care about figma, Ai is just as good

[@modarresrealy]

@@JeremyMuradesign Im just way too slow with AI lol

[@pantokrator1988]

cool effect but explaining is very chaotic

[@JeremyMuradesign]

Not to others

[@AB-gn5yl]

I don't know if this was me but it's confusing as hell

[@JeremyMuradesign]

not for other people, what was confusing?