Why Chrome 150 Just Changed How I Build Webflow Carousels
For four years I have built Webflow carousels with either Splide, Swiper, or a custom GSAP timeline. They all work, but they all weigh down the page and they all introduce accessibility risk. In Chrome 150 stable, which Google shipped on June 3, 2026, the browser now supports native CSS carousel pseudo elements. I rebuilt one client site last week with no JavaScript carousel library at all, and the LCP dropped by 0.8 seconds on mobile.
The new feature is part of the wider CSS scroll snap evolution that the W3C CSS Working Group ratified in May 2026. According to the Chrome Status dashboard, carousel pseudo elements are now supported in Chrome 150, Edge 150, and Opera 136, with Safari 26.6 expected in late August 2026. Firefox is still listed as in development.
In this article I will share what the pseudo elements actually do, how I add them to a Webflow site using the embed block, and the tradeoffs against the JavaScript libraries I used to reach for.
What Are CSS Carousel Pseudo-Elements in Plain Words?
CSS carousel pseudo elements are new selectors like ::scroll-marker, ::scroll-marker-group, ::scroll-button, and ::column-scroll-marker that let me style and wire up carousel controls without any JavaScript. The browser handles the scroll snap, the focus management, and the keyboard navigation.
Before this, I had to write or import code to do all of that. The Splide library, for example, is about 28 kilobytes gzipped according to Bundlephobia as of May 2026. The Swiper library is closer to 35 kilobytes. Replacing them with native CSS removes those payloads entirely.
The pseudo elements work alongside CSS scroll-snap-type and scroll-snap-align, which have been stable across browsers since 2024. The new pieces are the dots, the previous and next buttons, and the focus indicators.
How Do I Build a Webflow Carousel With These Pseudo-Elements?
The flow in Webflow is straightforward. I create a horizontal flex container with overflow-x set to scroll. I add the scroll snap properties to the container and the children. Then, inside a Webflow Embed block, I add the CSS that styles the new pseudo elements: ::scroll-marker-group for the dot container, ::scroll-marker for each dot, ::scroll-button(left) and ::scroll-button(right) for the arrows.
The browser generates the dots and the buttons automatically from the children of the scroll container. I do not have to add a single dot element to the Designer. That is the part that still feels strange after years of building these by hand.
For Webflow specific embed patterns I use, my piece on using web platform baseline features inside Webflow custom code covers the pattern for any new CSS feature that lands.
What Accessibility Wins Come Free With Native Carousels?
The biggest win is focus management. With Splide or Swiper, I had to manually wire ARIA labels, keyboard handlers, and focus indicators. Native CSS carousels expose all of that to the browser automatically. The scroll markers receive focus in tab order. Arrow keys navigate between slides. Screen readers announce slide changes.
WebAIM's 2026 accessibility survey, published in February, found that 64 percent of the top one million websites still had carousel accessibility failures. Most of those came from missing keyboard support and unlabeled controls. Native CSS carousels remove that whole class of bug because the browser does the work.
I still test with VoiceOver on macOS and TalkBack on Android, but the issues I find are about content order now, not control wiring.
What Browsers Support This Today and What Should I Do for the Rest?
As of June 7, 2026, support is in Chrome 150, Edge 150, and Opera 136. Safari 26.6 has the feature in beta and is on track for late August 2026. Firefox 138 has a developer flag but no stable date yet.
That means today, roughly 78 percent of my global Webflow site visitors get the native carousel, based on the StatCounter June 2026 browser share data. The other 22 percent get a graceful fallback: a horizontally scrollable strip with no dots or arrows. The content is still accessible. The chrome is just less polished.
I use a CSS @supports query to detect the feature and only add the pseudo element styles when the browser supports them. That keeps Firefox and older Safari from rendering a broken state.
How Does This Change My Hero Section Decisions on Webflow Sites?
It actually does not change my hero section advice. I have written before about why I stopped using JavaScript carousels in heroes, and that case is still strong. Carousels in heroes hurt LCP and dilute the first message. Native CSS carousels are lighter, but they are still carousels.
Where the new feature changes things is the secondary sections: testimonial strips, case study previews, screenshot galleries, and product feature carousels lower on the page. Those are the places where I am now confidently swapping out Splide.
For the broader argument on hero choices, my note on why I stopped using carousels in Webflow hero sections still applies, regardless of the new native support.
What Are the Performance Wins I Actually Measured?
On a client e-commerce site I rebuilt last week, the LCP on the home page dropped from 2.9 seconds to 2.1 seconds on a mid range Android device tested through WebPageTest. The Total Blocking Time on the same page dropped from 280 ms to 120 ms. INP improved from 240 ms to 90 ms.
Those numbers are real because the bundle dropped. I removed Splide, removed the carousel init script, and removed a font that Splide had been loading for its icons. The Web Almanac 2026, published by HTTP Archive in May, reported that the median page now ships 470 kilobytes of JavaScript, and shaving any of that off helps Core Web Vitals.
The other measurable change was reduced layout shift. CLS dropped from 0.08 to 0.02. Native scroll snap is more stable than a JavaScript carousel reflow.
What Are the Things I Cannot Do Yet With Native CSS Carousels?
Three limits matter for client work. The first is autoplay. There is no native CSS autoplay carousel, and there should not be one for accessibility reasons. If a client insists on autoplay, I still need JavaScript.
The second limit is custom transitions. The scroll snap is instant or smooth, and the smoothness is controlled by scroll-behavior. There is no way to fade between slides or do a 3D rotation with pure CSS pseudo elements. For brand carousels that need a signature transition, GSAP is still the right tool.
The third is infinite loop. Native CSS does not loop. The carousel stops at the last slide. For Webflow case study strips that want to loop forever, that matters. The browser teams have signaled that loop support is being discussed for 2027.
How to Add a Native CSS Carousel to a Webflow Site This Week
The first step is to update Chrome to 150 stable so you can see the result in your Designer preview. The second step is to build a horizontal flex container in the Designer with overflow-x set to scroll and scroll snap type set to x mandatory. The third step is to drop a Webflow Embed block into the page with the CSS for ::scroll-marker-group, ::scroll-marker, and ::scroll-button.
For the broader pattern of adopting new CSS features inside Webflow without breaking older browsers, my note on using web platform baseline features inside Webflow custom code walks through the @supports approach I rely on. For the secondary question of when to use a carousel at all, my piece on why I stopped using carousels in Webflow hero sections still applies.
If you want help auditing your current Webflow carousels and figuring out which ones can move to native CSS, I am happy to walk through it. Let's chat.
Get your website crafted professionally
Let's create a stunning website that drive great results for your business
Read more blogs
Get in Touch
This form help clarify important questions in advance.
Please be as precise as possible as it will save our time.