Chrome makes CSS carousels more practical for modern web layouts

Chrome has introduced new CSS features that make it possible to build carousel experiences without JavaScript. Published on March 20, 2025, the Chrome for Developers article explains how CSS Overflow 5 features in Chrome 135 can create scroll buttons, scroll markers, accessible navigation, and smoother carousel patterns directly through CSS.

{getToc} $title={Table of Contents}

Chrome makes CSS carousels more practical for modern web layouts

Carousels have always been one of those UI patterns that look simple but can become surprisingly complex. Designers want smooth navigation, clear visual states, keyboard support, responsive behavior, and good accessibility, while developers often need to add JavaScript to make the experience work properly.

Chrome’s new CSS carousel features are exciting because they move more of that work into the browser. For web designers and template creators, this opens the door to cleaner sliders, galleries, product strips, featured sections, and horizontal content areas that can be built with less custom scripting.

{getCard} $type={post} $title={More Chrome news} $info={CSS, UI features, web platform updates, and design workflows} $icon={}

How CSS scroll buttons and markers work

The update introduces two important pseudo-elements: ::scroll-button() and ::scroll-marker(). Scroll buttons provide browser-created interactive controls for moving through a scroll area, while scroll markers work like navigation points that can jump to meaningful parts of the carousel.

Chrome explains that these controls are created by CSS, but the browser handles important behavior such as roles, tab order, state, keyboard interaction, and screen reader support. That matters because accessible carousels are difficult to get right when every button, marker, and state has to be manually wired.

New possibilities for template and UI design

For template designers, the biggest benefit is cleaner structure. A carousel can start as a normal scroll area with CSS scroll snapping, then gain buttons and markers through CSS instead of requiring a custom JavaScript component for every layout.

This can make galleries, featured post sliders, pricing sections, testimonial rows, product cards, and visual portfolios easier to maintain. It also helps performance because the browser can provide the interaction layer without hydration, lazy sizing issues, or extra script logic.

The feature is especially interesting for Blogger, WordPress, and static template systems where lightweight UI matters. A JavaScript-free carousel can reduce complexity while still giving users a polished and accessible browsing experience.

Availability and current limitations

Chrome says these CSS carousel features are available from Chrome 135. The article also points out that work is continuing on future improvements, including the ability to bring custom elements for scroll buttons and markers, as well as platform support for cyclical scrolling.

For production websites, designers should still test support, fallback behavior, accessibility, and layout consistency before replacing existing carousel components. The direction is promising, but cross-browser support and project requirements should guide how quickly these features are adopted.

{getCard} $type={custom} $title={What's New?} $info={More web design news, template updates and creative UI resources} $icon={}

Sources and Recommended Links

• Carousels with CSS | Chrome for Developers (Official)
• CSS Overflow Module Level 5 | W3C CSS Working Draft
• Carousel Configurator | Chrome Demo