How can I create an iOS7-like blur effect in Webflow without using opacity?
- Create a div with a semi-transparent rgba background and apply the Backdrop Filter blur effect via the Style Panel.
- Add optional borders or shadows to enhance the iOS look, and include custom CSS with -webkit-backdrop-filter for Safari support.
To create an iOS 7-style blur (frosted glass) effect in Webflow without using opacity, use the Backdrop Filter property with a blur() value. This simulates the translucent blur seen in iOS interfaces.
1. Create the Blur Container
- Add a Div Block to your Webflow project.
- Set its position to
absolute,fixed, or place it within a container based on your layout needs. - Size the div using width and height settings.
- Set background color to a semi-transparent value like
rgba(255, 255, 255, 0.2)or white at low opacity to enhance the blur feel without using element opacity.
2. Apply Blur Effect Using Backdrop Filter
- With the Div Block selected, go to the Style Panel.
- Scroll to the Effects section.
- Click + Add Filter, then choose Backdrop Filter.
- Set the Blur value (e.g.,
20px) for a strong frosted-glass look. - Ensure Backdrop Filter is supported on the browser by keeping fallbacks in mind (e.g., a solid semi-transparent background).
3. Give the Element a Border or Shadow
- Use a subtle 1px solid white border or inner shadow to match the iOS effect more closely.
- Set border-radius for rounded corners if desired.
4. Enable Backdrop Filter in Custom Code for Safari Support (If Needed)
Safari sometimes requires the
-webkit-backdrop-filterproperty.Go to Page Settings > Custom Code > Inside Head, and insert a
<style>declaration targeting your blur div class, like:<style>.blur-div { -webkit-backdrop-filter: blur(20px); }</style>
Replace .blur-div with your div’s class name.
5. Don't Use Opacity on the Blur Div
- Opacity affects the whole layer, including children.
- Stick to rgba color backgrounds and backdrop filters instead of using the Opacity setting.
Summary
To mimic an iOS 7-style blur in Webflow, use the Backdrop Filter with a blur effect and a semi-transparent background color, avoiding the Opacity property altogether. Add optional borders or shadows for extra polish. Add custom CSS for full browser compatibility if needed.