Nothing is simpler than a black-and-white color scheme. And yet these extremely contrasting colors could be the most powerful combinations.
For starters, it is infinitely useful. Using black text on a white background allows for the best accessibility. It’s always a safe bet when designing content.
But it goes beyond mere utility. Black and white can also be used to make a bold artistic statement. It’s perfect when making those can’t-miss elements on a website or mobile app.
Today, we’ll show you eight examples of CSS and JavaScript threads that go all-in on B&W. Here we go!
CSS Mesmerizing Optical Illusion by Mark Boots
A few lines of CSS are needed to create this mesmerizing pattern. Conical gradients are used to create the oblique orientation. Meanwhile, black-and-white boxes bring some visual chaos. Don’t stare at this one too long!
See the optical illusion Pen by Mark Boots
Sliced Text Effect by Shireen Taj
This fragment also counts as a bit of an optical illusion. It consists of two HTML <div> tags, each containing the same word. CSS is used to overlap them and create the “slice” effect. It may not be great in terms of accessibility, but it makes for a great bit of design.
Check out the Sliced Pen Text Effect by Shireen Taj
Stroke Logo Animation by Jon Kantner
An animated logo can provide a great way to introduce your brand. But often it’s best to keep things subtle. That theory certainly applies to this beautiful presentation. The simple black-and-white text is gently revealed with staggered layers of stroke animation.
See Jon Kantner’s Pen Stroke Logo Animation
CSS Animated SVG Mom with Cub by Mikael Ainalem
Clever use of SVG makes this mother and baby animation fun. Notice how the cub slides under the mother’s foot, adding elements of depth and surprise. It could be extremely simple, but also an attention-getter.
See the Mom with Cub Pen by Mikael Ainalem
Black & White Abstract CSS Doodle Animation by Alisa Kin
This animation has a lot of moving parts, but surprisingly not much code running on the surface. That’s because it uses <css-doodle>, a web component that helps draw CSS patterns. In addition, each click produces a new version.
See Black and White Pen CSS Abstract Doodle Animation by Alisa Kin
CSS Squares Gambit Animated by Chris Gannon
Inspired by a sequence in The Queen’s Gambit series, these rotating boxes would be the perfect complement to a logo or hero area. And because it’s built with SVG, it’ll look sharp at any size.
See The Pen Gambit Squares by Chris Gannon
Black & White Scroll Effect with Crianbluff
The contrast of black and white is in full effect here. As you scroll, the text changes color instantly, depending on the background. The secret sauce is CSS mix-blend-modewhich ensures changes from black to white and vice-versa.
Check out the black & white scrolling Pen Effect by Crianbluff
Vertical Image Loop with Scroll Acceleration and GSAP by Cameron Knight
Finally, we cannot forget the power of black and white photography. It’s put to good use in this scrolling photo gallery. The faster you scroll, the faster the images move vertically through the presentation. Hovering reveals the full color image. CSS blending effects on the text create a seamless look.
Check out the Vertical Pen image loop with scroll acceleration with gsap by Cameron Knight
Timeless Colors, Bold Looks
The world is full of color. But when you want to get back to basics, there’s nothing like black and white. It offers a classic look that is sure to catch the attention of visitors.
The examples above show that being basic doesn’t have to mean boring. In fact, the use of movement and interaction really kicks things off.
Want to see more black and white clips? Check out our CodePen collection.
