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.
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!
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.
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.
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.
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.
CSS Animated 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.
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.
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.