Windows 11 like Glassy Design

Do we know how to mimic the glassy design used in Windows 11, especially the colors used in the trailer? (the dev builds colors aren’t as exaggerated)

Is this just simple transparency levels? When I fool around with making a transparent, glassy black, it always just winds up being an ugly grey/gray.

Also, there seems to be some gradient action going on, perhaps we can mimic that too?

Any input is appreciated :+1:t5:

I haven’t used this myself but I remember seeing it yesterday. Might be useful for you Glass UI Generator - CSS generator for glassmorphism | Product Hunt

1 Like

This looks like exactly what I’m talking about, however, I’m not exactly sure how to use CSS in bubble :sweat_smile: I’ve just gotten comfortable with HTML

Should I be looking for a CSS plugin? Will that plugin connect directly to my element(s) backgrounds? Or is there like a setting I should be turning on in my App Settings?

most importantly, will this be hard :thinking:

also thx for the reply chief!

I haven’t really worked with CSS in Bubble apart from just using code blocks or writing in the page header. I’m sure there are good plugins though that do a better job.

It’s not hard. Like Matt says, you can copy paste the CSS into either an “HTML” element on the page, or else in the page header (i.e. the editor window for your while page)

Only thing you need to enable is in the app settings there’s is an option for “expose element IDs”. You then assign an ID to the specific group you want to apply the style to ( which must match the CSS name of that style)

… If it sounds harder than it is I’m not explaining it well :stuck_out_tongue_winking_eye: