Achieve this effect : Glass Metaballs
the title with preview picture says it all.
I know how to do both of those, however not at once as one kinda disables the other.
I found this design on the instagram and immidiately i wanted to recreate it so badly
my code so far:
https://codepen.io/thecubiq/pen/NWoEJyz
original figma design:
https://www.instagram.com/p/Cv4Hv9nN-AG/
86 Replies
You could always try doing this effect without using svg. You can use filters to get this effect
https://www.youtube.com/watch?v=tO7S47PKr8w
Ana Tudor
YouTube
Pure CSS animated 1 element gradient blobs with filters & blend modes
Works in WebKit browsers and in Firefox. See the live demo at https://codepen.io/thebabydino/pen/NjqXaz/
You can see the live demo here https://codepen.io/thebabydino/pen/brywXv/ Cross-browser.
If the work I've been putting out since early 2012 has helped you in any way or you just like it, please consider supporting it to help me stay afloat...
oh right, just using contrast and blur i suppose. however not entirely sure if i can then still use the backdrop-filter as it kinda disables the filter xd
Im not sure really if backdrop-filter will disable filter since it's 2 different properties
Never actually tried that
But yeah, blur and contrast
fair enough, then what about the icon? im sure it will blur it xd
I guess you can do something like
So then you can just blur the blobs and stack the icons div on top of blobs div, either by using position:absolute; or use grid. Then icons should not be affected
pretty much what i thought ill have to do xd
Yea xD
fair enough, i guess that's still fine xd
But yeah you can give it a try. If you don't succeed i will see if i may be able to get it to work 🙂
im definitely giving it a try xd
Great ! 🙂
oh great :D in order to use the css filter, id have to have something in bg and then somehow blend it using mix-blend-mode but all in all, that doesn't work well with backdrop-filter xd
https://codepen.io/thecubiq/pen/abXQgNg
so gotta use the svg filter and see what happens xd
and with the svg filter, it blurs the outside somehow :D
so awesome :D
maybe creating metaballs using radial gradient trickery instead?
that might work xd
now we can blur it xd (or can we? :D)
nevermind, it just doesn't work, no glass metaballs from me xd there really has to be a way of doing it with css come on..
Maybe just create the image for it and use it as background 😄 ? (I'm also commenting to remind me later to give it a try)
i should have really started with that lol, im going to try it. just simple svg shape that will be then blurred
Yeah, you'd need one for each side and then use CSS selectors to decide which image to use, just like with
<li> where you don't want additional border, padding or whatever on neither the first nor last elements.all id do is
nav > .icon:not(:nth-last-child())
nothing super hard yk.. but that doesn't work either lol (backdrop filter is a problem)Don’t forget to use
-webkit-backdrop-filter alongside the backdrop filteri mean obviously in the final version but for the concept it should not make any difference, do it?
Depends what browser you’re working on, could be why you’re not seeing the filter effect and additionally if the background colour you’re using has an alpha channel
Here it looks like the backdrop filter is on the div itself holding the blobs, and it doesn’t have a clip-path
well rn im on chromium
So it’s applying the filter there, not to the blobs
yes, because i have multiple overlaying elements over xd
If it were me , I would try using a clip path on the div , putting the bg colour and filter on that , then positioning the icons with flex or grid inside. Bc your filter is working just not where you want it
exactly :D
currently creating the svg clip path xd
i mean if you feel like trying it too, feel free to :D
Hahah nice. Too busy at the moment but I’m sure you’ve got this!
maybe try to make a shape reassembling the shape on top of the yellow line and use that to mask that part out
kind of there xd
i do not understand your approach xd
(by kind of i mean not that much but whatever xd)
so basically u can use mask to cut parts of an element out. so its like making parts of element transparent
basically what i was saying is, u make those balls, use pseuo elements to connect them
then use masking to cut those top and bottom parts out
to make the curvy shape
if im being honest ive tried 5 approaches already, i cannot use the backdrop filter along with pseudo elements.
here, pseudo element using radial gradients, if i try blurring it with backdrop filter, it doesn't blur the content properly
it is about as close as i could have gotten to it xd
why is the psedo element using graident
i mean if i look in the actual design. they just have transparent bg with backdrop filter
gradient to make the metaball joinings
there's that approach im talking about
the blue thing is a gradient
well i was saying use the pseudo element to join them and use mask to cut out
well its quite the work but depending on how u have already used 5 different techniques i think its worth the try 😂
how do you mean use mask? i still don't quite understand the approach, ive been trying it the whole day and while im really enjoying learning the different approaches, i still don't understand how's yours different than mine
well ik masks r used to cut parts out but i never managed to get ahold of it tho @tok124 (CSS Nerd) has a firm grip over it i think he can teach u
oh well, ill patiently wait for any of your approaches then :D thanks
the clippath approach, it partly works, there's this clear cutout but it's somewhat fine id say, definitely the con of not being responsive sadly
oh yeah, changing the order of effects in backdrop filter makes it more seemless but definitely still there xd
https://codepen.io/thecubiq/full/abXPvGz
i mean it's definitely something, after a lot of trial and error it does have the shape but it's not seemless xd
I think you will need mask-composite too and i still need to figure out that part about mask. I have a good experience with the mask-image property and gradients but not mask-composite 😦
lul k
mask composite is pretty much still in experimental stage so i wont be using that either
still not solved, this is as close as i could get and you're making compromise as you lose the responsivity.
Ah man I didn’t take the clipPath into consideration for responsivity. Isn’t there a way with svgs to set the width to a responsive unit and tweak the preserveAspectRatio ? I’m not great with svgs , maybe there’s an svg expert here.
I have used one clip-path for one screen size and then in a media query changed it to another clip-path. How responsive does it need to be? I was thinking this was for mobile nav or a fixed component.
Where is it supposed to be on the page?
Couldn’t you just rotate it for mobile so they stack on top of each other ?
yeah, it doesn't have to be responsive, it would be just a nice perk, i also am not getting this to a production, i myself dont even have a job lol, i just wanted to try to recreate this as much as it's possible you know :)
Maybe just rotate it in the media query or even to make your life easier, rotate the svg in Figma and copy it as a new svg , then just change the clip path in your media query and switch your flex direction or grid. Rotating it then all the icons could be annoying.
i mean sure, that is definitely a way but i still want to find another, better way without having to use clipping mask as it's clear where the connections are made
Oh I thought you made a clip-path (not mask) for the whole div
yeah, exactly:D i did that 😅
Are you in a different code pen then ? This is what I’m seeing
i mean this one is using gradient
https://codepen.io/thecubiq/pens/public
i mean i created 4 attempts so far
You have it named clip-mask but have clip-paths used in css. These are two different properties (mask-clip and clip-path)
However I see the commented out clip-path on the icons themselves; I was suggesting putting the clip-path on the on the nav itself as one whole path.
ah, so that it will be one big blob path?
i don't find it much elegant tbh
thought there would be some more flexible way..
Yes. You could alternatively set it as a bg image on the nav instead of using the single svg as a clip-path .
Or even on a pseudo element so you can easily rotate it for small screens
well i was more going to ask about the flexibility, i won't be using the exact same menu all the time but wanted to know this technique of well, flexible morphing shapes xd
as i see them more and more often designed by one of the best ui designers that sadly do not know how to code and then there's us programmers :D
Using as a bg image instead of a clip-path allows responsiveness. Not perfect solution but better than using it on each icon. You can extend the menu by just copy and pasting one of the middle paths to add it to the svg to make it longer. Or remove one of the blob paths in the middle to make it shorter.
Sounds much easier to me than using on each icon and mask clip or gradients but everyone is different
interesting, definitely will give it a try! thank you
alright, ive found an interesting way that i want to explore as i still want to make this working and functional, basically, after even more research, im nolifer talking days, (because im unemployed and nobody wants me :D), ive found 2 more approaches that i want to explore where the second one is probably the best one, both using the svg paths, both still not ideal but im working on it xd
first approach by css-tricks.com
https://css-tricks.com/a-glassy-and-classy-text-effect/
https://codepen.io/chriscoyier/pen/YzKWYWa
i was thinking of creating custom font that has the connector symbol but then i found out about svg patterns and using masks instead, during the years, now it's supported even in chromium based browsers yay!
https://stackoverflow.com/a/60717081
ive just tried editing this simple demo and turns out that mask actually masks even the backdrop filter yay! that means that ive finally maybe found somewhat great solution that's at least a bit more flexible! ill try it right now and possibly share the results with you
Chris Coyier
CSS-Tricks
A Glassy (and Classy) Text Effect | CSS-Tricks
The landing page for Apple Arcade has a cool effect where some "white" text has a sort of translucent effect. You can see some of the color of the background
Chris Coyier
CodePen
Text with Blurred Background
- Video from https://pixabay.com/videos/universe-jar-colourful-experiment-13100/ - Idea from https://www.apple.com/apple-arcade/...
Stack Overflow
How to use SVG clipPath with Pattern via CSS clip-path property?
The initial SVG figure with pattern:
<svg width="200" height="200" viewBox="0 0 100 100">
<defs>
<pattern id="img-dotted-dots" x="0" y="0" height=".08" width="7.69%">...
it's definitely doing something
oh well, fome more problems xd
https://codepen.io/thecubiq/pen/eYxwzZz
yay!
just that it doesn't work on edge, currently also checking other browsers, they say chrome can render it
yay chrome!
edge dev works too
https://codepen.io/thecubiq/pen/qBgzyrP
final design, at6, managed to use even the awesome filter so that the shapes are flexible and can be always edited. really like how it turned out <3
also this approach works even on normal edge, gotta check the safari later
Looking good on FF as well, great job!
sadly mobile browsers don't show it properly so i just rounded the corners so that it doesn't matter that much, that said, gotta test it on safari as well.
Safari ^
I can check it on my mac but it gotta be later
i know, ive checked that. the inline mask support for either safari mobile or even desktop are not there yet, after all the behavior of inline masks currently is very poor.
Maybe possible with flags enabled
But who would do that anyway
well ive been studying the problematics of the mask support for over a week now and from what ive found out, basically as of 2023 external masks work as intended however the referenced masks, from an inline svg (so the more flexible kinda mask) is buggy and definitely not ready for production.