8 CSS Snippets for Creating Split-Screen Layouts

Split-screen UIs have become a popular way to showcase content. We often think of them as being utilized in areas where we want users to choose between two options. But we’re also seeing other creative uses of the technique.

For example, a split-screen can also be used to great effect as a full-page layout or even as a transitional animation.

Here are 10 examples of split-screen UIs, complete with source code that you can edit to fit your needs. Each has something unique to offer.

Making a Choice by Bridget Reed

This is certainly the most common way to use a split-screen. A website visitor is presented with two options. Here, the background image colors help provide nice separation, while the rounded logo in the middle ties everything together.

See the Pen Website – Split Screen by Bridget Reed

Splitting Up a Slider by Fabio Ottaviani

A split-screen also makes for an interesting transitional effect, as we see with the slideshow example below. Scrolling down causes each half of the screen to split and reveal the next image in the queue. The result is a very smooth and high-end UI.

See the Pen Split Slick Slideshow by Fabio Ottaviani

Split Page Layout With a Static Sidebar by Travis

With HD screens dominating and 4k gaining ground, more designers are taking advantage of that extra screen real estate. This example layout provides a static sidebar with a bold background image. But it also looks great on smaller screens, as that sidebar becomes a header. It’s both attractive and functional.

See the Pen Split screen layout by Travis

For Comparisons’ Sake by Envato

Another trend gaining traction is utilizing the split-screen to compare “before” and “after” images. Here we have a setup that allows users to simply move their mouse to see the differences between two images. Utilizing just a little bit of JavaScript, this UI is an interesting twist on the technique.

See the Pen Split-Screen UI by Envato Tuts+

Alternating Gallery by Kseso

The “half by half” scrolling effect with this example adds a unique touch. It almost seems as if the cards and photos are alternately stacked on top of each other as you scroll. And since it uses less than 150 lines of pure CSS, load time shouldn’t be much of a concern.

See the Pen Scrolling half by half pure #CSS by @Kseso by Kseso

Magazine Split-Layout by Brian Haferkamp

This layout emulates something you might find in a print magazine. The bold title and introductory text on the left provides terrific contrast with the photo and multicolumn article on the right. Overall, it makes for a very slick and professional look.

See the Pen Personal Profile // Keanu Reeves by Brian Haferkamp

Split-Layout Services Overview by Luke Meyrick

The concept here is really cool from a branding perspective. It uses a split-screen within a page with a static branding message on the left, combined with a scrollable listing of services offered on the right. It’s just different and a way to stand out from the crowd a bit.

See the Pen by Luke Meyrick

3D Carousel Split-Layout by Paul Noble

The transitions between slides in this carousel literally add a new dimension to split screens. Each slide “splits” in half as the next one is revealed in a cool 3D format. There’s a certain machine-like quality here that could be a great fit for an engineering or industrial firm.

See the Pen Split 3D Carousel by Paul Noble

Splitting’s the Difference

What started as a way to choose between A or B has become something more. Split layouts and animations are offering designers another creative avenue for encouraging interaction.

While we still see them in their traditional form, we also find that they are being used to enhance things like scrolling through content and image galleries. It’s even being used to mimic print design techniques.

Hopefully, the examples above will serve as an inspiration for ways you can add a split UI to your own projects. Have fun experimenting and implement features that both look great and add something unique to the mix.

More CSS Snippets for Layouts