SVG filters provide a basic lighting system you can sync with a little JavaScript and use in your web apps 💡 ... not as powerful but pretty cool

alternative approach here is a masked pseudoelement that uses CSS backdrop-filter: blur() + contrast() + brightness() combos ⚡ fun to try out the SVG version though – you can read more about <feSpecularLighting> here 👇

Only a matter of time before we get liquid-glass.js

guys stop retweeting this before it reaches my team's designer

haha - don't show them plz 🙏

This is actually really cool, you are the dev every designer needs lol

you can achieve similar effect without having to sync it with js just by ramping up brightness and saturation for the backdrop filter the effect is not as pretty but it's an approach without any js 😅

did mention that approach - as you say, it can be "similar" 🤏 but it lacks "control" and you have to rely on the light being in the backdrop or duplicating the light source to make sure there is one in the backdrop (got a follow up with "extras" 🤙)

maybe thin the border and add a radial gradient to show "rounding"?

went with the border like that for video compression 😅 you don't have control over "rounding", it's specular lighting based on the phong lighting model – you jus' get control over intensity, height, position, etc. alternative is masked backdrop-filter blur + contrast ✅

Where does the light come from? Are the app icons the light source?

mapping the icon positions to fePointLight positions relative to the surface position the caveat is that light sources are single color