I’ve been working on an iOS app and noticed that Figma has this amazing glass effect called the “Frost” slider. It creates this beautiful translucent background that would be perfect for my app’s settings screen. I’m wondering if anyone has experience implementing similar glass morphism effects in iOS development. The effect gives that modern frosted glass appearance that Apple uses in some of their newer interface elements. Has anyone found a good way to replicate this kind of visual effect programmatically? I’m particularly interested in how to achieve the right balance of transparency and blur to match what Figma offers in their design tools.
for hybrid dev, backdrop-filter with blur() in css is solid. for pure swift, layering a white view with low opacity over the blur effect mimics that frosted figma look realy well. just make sure to set clipsToBounds on the container or edges could look messy.
I’ve done this effect a bunch of times. Skip UIVisualEffectView and go with CALayer properties instead - way more control. Set your CALayer backgroundColor to white at 20% opacity, then add a CAFilter with kCAFilterGaussianBlur (8-12 pixel radius works best). Here’s the trick: add a subtle border with cornerRadius and a really light shadow. That’s what gives you the proper glass edge look. Performance is way better than stacking visual effect views, especially with multiple glass elements. Just test on older devices - blur calculations will tank your framerate on anything older than A12.
To achieve a frost slider effect in your iOS app, you can utilize the UIVisualEffectView combined with UIBlurEffect for the translucent background. If you want to enhance the contrast, layering a UIVibrancyEffect can be beneficial. It’s important to adjust the background’s alpha within the range of 0.1 to 0.3 to replicate that frosted appearance. Experimenting with different materials like .systemThinMaterial or .systemUltraThinMaterial can also yield great results. Make sure to test on actual devices since simulations might not reflect the visual accurately, and keep an eye on performance when using multiple overlays.
Been playing around with this and found mixing Core Image filters gives way better control than the usual methods. I use CIGaussianBlur with radius 15-20, then layer CIColorControls to boost saturation a bit. The real trick is adding subtle noise with CIRandomGenerator at low intensity - that’s what makes it look pro instead of amateur. Figma’s frost effect has this tiny grain that makes it feel real. Just heads up - the effect looks totally different depending on what’s behind it, so test with different backgrounds. It’s heavier on performance than UIVisualEffectView but looks way better.
This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.