CSS Styles Support
In this guide, we provide an overview of modern CSS styles in Framer and their browser compatibility.
Modern CSS styles in framer
Framer supports a wide range of CSS styles, including Blur, Filters, Blending, Z Index, Cursor, Pointer Events, and User Select, all of which are widely supported by major browsers. Below, we highlight a recently introduced property with strong browser support: Overscroll.
Overscroll behavior
The overscroll property controls what happens when a user scrolls to the boundary of a scrollable area, such as a Frame or Stack with Overflow set to Scroll.
Key use case: Prevent the background from scrolling while a scrollable menu is open. This especially useful in mobile navigation.
Browser support for overscroll
Chrome: 65+
Chrome on Android: 111
Edge: 79+
Safari: 16+ (since September 2022)
Safari on iOS: 16+
Firefox: 59+
Opera: 52+
Opera Mobile: 73
Samsung Internet: 8.2+
Android Browser: 119
Firefox for Android: 119
For the latest browser support, refer to Can I Use.
Masks
The mask property allows using gradients or images to fully or partially hide part of an element, like a Frame.
Browser support for mask
Chrome: 120+
Chrome on Android: 120+
Edge: 120+
Safari: 15.4+
Safari on iOS: 15.4+
Firefox: 53+
Opera: 106+
Opera Mobile: 80
Samsung Internet: 25+
Android Browser: 120
Firefox for Android: 53+
For the latest browser support, refer to Can I Use.
FAQ
What modern CSS styles does Framer support?
Framer supports a wide range of CSS styles, including Blur, Filters, Blending, Z Index, Cursor, Pointer Events, and User Select, all of which are widely supported by major browsers.
How does the overscroll property work in Framer and what is a common use case?
The overscroll property controls what happens when a user scrolls to the boundary of a scrollable area, such as a Frame or Stack with Overflow set to Scroll. A key use case is to prevent the background from scrolling while a scrollable menu is open, which is especially useful in mobile navigation.
What is the browser support for the CSS mask property in Framer?
The mask property allows using gradients or images to fully or partially hide part of an element, like a Frame. Browser support includes Chrome 120+, Chrome on Android 120+, Edge 120+, Safari 15.4+, Safari on iOS 15.4+, Firefox 53+, Opera 106+, Opera Mobile 80, Samsung Internet 25+, Android Browser 120, and Firefox for Android 53+.
Updated
