There’s nothing simpler than a black-and-white color scheme. And yet these fiercely contrasting colors may form the most powerful of combinations.
For starters, it’s infinitely useful. Using black text on a white background provides the ultimate in 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 crafting those can’t-miss elements on a website or mobile app.
Today, we’ll show you eight examples of CSS and JavaScript snippets that go all-in on B&W. Here we go!
Mesmerizing CSS Optical Illusion by Mark Boots
A few lines of CSS are all it takes to create this mesmerizing pattern. Conic gradients are used to create the lopsided orientation. Meanwhile, black-and-white boxes bring some visual chaos. Don’t stare at this one for too long!
See the Pen optical illusion by Mark Boots
Sliced Text Effect by Shireen Taj
This snippet 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. Perhaps not great for accessibility, but it does make for a standout bit of design.
See the Pen Sliced Text Effect by Shireen Taj
Stroke Logo Animation by Jon Kantner
An animated logo can provide a great way to introduce your brand. But it’s often best to keep things subtle. That theory certainly applies to this beautiful presentation. The simple black-and-white text is revealed gently with staggered layers of stroke animation.
See the Pen Stroke Logo Animation by Jon Kantner
CSS Animated SVG Mum with Cub by Mikael Ainalem
The clever use of SVG makes this mama and baby animation a fun one. Notice how the cub slips underneath mom’s leg, adding the elements of depth and surprise. It may be incredibly simple, but also an attention-getter.
See the Pen Mum with cub by Mikael Ainalem
Black & White Abstract CSS Doodle Animation by Alisa Kin
This animation has a lot of moving parts, but surprisingly little code running it on the surface. That’s because it uses <css-doodle>, a web component that assists in drawing CSS patterns. In addition, each click produces a new version.
See the Pen Black and White Abstract CSS Doodle Animation by Alisa Kin
CSS Animated Gambit Squares 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 will look sharp at any size.
See the Pen Gambit Squares by Chris Gannon
Black & White Scrolling Effect by Crianbluff
Black and white contrast is in full effect here. As you scroll, the text instantly changes color, depending on the background. The secret sauce is CSS mix-blend-mode, which ensures black changes to white and vice-versa.
See the Pen Effect black & white scrolling by Crianbluff
Vertical Image Loop with Scroll Acceleration and GSAP by Cameron Knight
Finally, we can’t forget about 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. The CSS blend effects on the text make for a seamless look.
See the Pen Vertical 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 quite like black and white. It offers a classic look that is sure to draw the attention of visitors.
The examples above demonstrate that being basic doesn’t have to mean being boring. Indeed, the use of movement and interactivity kick things up a notch.
Want to see even more black-and-white snippets? Check out our CodePen collection.
8 Black & White CSS & JavaScript Snippets That Make a Bold Statement Medianic.
