20 Beautiful Examples of Black and White Websites
Black and white are a timeless pairing. When combined, they look classic, cinematic, and elegant no matter the scenario you may use them in.
For a lot of people, monochromatic designs and photography appear much more artistic than content in full color. The interplay between the light and shadows is accentuated, making the showcased content appear dramatic and mysterious. Unlike polychromatic designs where it’s obvious what you’re looking at, the black and white color scheme incites you to use your imagination to picture the story and the emotion behind the depicted subjects and elements.
In today’s world of web design where websites in color prevail, a site with a black and white color scheme looks distinct, powerful, and slightly edgy. Viewers are drawn to its magnetic and somewhat abstract aesthetic, wanting to decipher the story behind what’s displayed.
Creating an enrapturing website using only two hues may seem challenging, but the following individuals and brands have nailed the monochromatic style. They have found a way to craft astounding presentations by combining terrific animation effects, striking typography choices, and other elements that are sure to increase the viewer’s engagement on a site. The projects we will discuss to introduce you to the beauty of black and white websites include:
You can also check out the demos in our Qi Theme for Elementor for some great examples of what a black and white website could look like:
GT Zirkon’s website is the proof that the black and white pairing is a terrific choice for showcasing the beauty of typefaces. And while the color palette on the site is minimal, the creativity of the team who designed it is the polar opposite. The homepage is imbued with terrific animated GIFs, immersively showcasing the font and its characteristics. For example, the process of designing the typeface is presented through an animated GIF of what appears to be a simplified version of Photoshop. It depicts the ways in which Tobias Rechsteiner, the typeface designer, manipulated the letters until he achieved the final GT Zirkon font look. Bold and italic versions of the font are also presented using GIFs. The former is introduced through a row of letters showing the difference between thick and thin strokes. The latter is depicted with the help of an animated protractor – the letters are designed to lean at a 13° angle, and as soon as the arrow reaches that number, the letters lean right. Throughout the site, but especially at the top section of the homepage, you’ll also notice a bunch of outlined, entwined, hypnotic strings that wildly sprout all over the content. You can stop them anytime by clicking the “Stop Growth” button. If you let them grow freely, they’ll form chemical connections as well as various 3D geometric shapes, including what looks like gemstones (complementing the name of the font).
For the Love of Bread is a series that introduces viewers to the world’s best bread makers. This website is a stunning introduction to the show, giving viewers a taste of what they will experience through the eight-part series. The immersive fullscreen videos are in black and white, enhancing the site’s cinematic appeal. As you scroll and jump from one episode preview to the next, the videos slightly distort and a duotone effect appears on the screen just before the next preview loads. When you press the “Play” button, you’ll be able to enjoy the episodes in full color. The “About” section of the site has a white background while the typography is in black. On the other hand, the “Episodes” list includes a black background and white text, while the enticing black-and-white episode previews lure you into the world of the show. The fact that the background and typography colors invert from one section to the next adds dynamicity to the site making it exciting to explore for anyone who visits it.
Oto Nove Swiss is a music festival that was organized in London’s Cafe Oto, but the 2020 edition took place in Paris. The website crafted for the occasion is minimal yet memorable. The only two colors are white (in the background) and black (for the content), but the clever typographic choices and the interesting navigation menu make it exciting to explore. Regarding typefaces, the combination of the thin, monospace font and large, bold, sans-serif typography looks dynamic and is appealing to the viewer’s eye. The menu is positioned on the far-right side of the screen, with vertically placed sections that are always visible. Once you click on them, they take up the entire screen. You can also play song snippets of the artists who participated in the festival, which makes the website more immersive and fun for the audience.
Twoo is an independent design studio founded by Danilo Campos and Carlos Kun. Their website not only exemplifies how effective the convergence of black and white is but also highlights how mesmerizing a websites with horizontal navigation can be. The studio’s online presentation captures the viewer’s undivided attention because of the striking interplay between black and white elements. Smart font choices and sizes are attractive to the eye as well, inciting visitors to discover more details about the Twoo studio. Key sentences that describe the studio’s philosophy and what they do are bold and white, looking particularly striking next to the more subtle light grey body text and against the clashing blackness of the backdrop. At the bottom of the page, there is a “Projects” section. On click, it launches the studio’s portfolio page where navigation changes to vertical and the backdrop becomes white. The change of the color of the backdrop makes sense since project single pages contain lots of colorful visuals and the light background makes them easier to digest.
Levon Aronian is one of the world’s best chess grandmasters. The design of his commanding website matches his profession – the clear, white background is interspersed with thin, black lines, resembling a chessboard. As you scroll down the homepage, a 3D chess figure keeps you company. The figure moves across the checkered canvas, providing an amusing experience, but also directing your attention toward the significant elements on the page. The figurine is also white with light grey edges. What’s interesting about its appearance is that the black typography reflects off of its surface. The site is filled with large, black sans serif and serif fonts that are placed both horizontally and vertically all over the screen, creating an exciting typographic experience for viewers. Perhaps the most eye-catching page of them all is the “Fun” page. This layout contains information about some of Levon’s interests. There are 3D icons representing his hobbies and passions, such as music, books, movies, etc. All of them are colored in different hues, but thanks to the white background, the site doesn’t go into a color overload for one second. Instead, the content is easy on the eyes regardless of its colorfulness. This website might seem simple at first sight, but its chess-inspired design, immersive animation effects, and beautiful visuals make it beautiful to explore.
Universal Sans is a website that allows you to create and download your own sans serif typeface. On some other typography-related websites on the list, we could see how well black texts look on a white backdrop, but this example demonstrates how effective the combination of the two colors is even if you invert them. In case you find the site’s default color scheme too overpowering, you have the possibility of inverting the colors with a color switcher. Whichever option of the two you choose, one thing’s for certain – in both scenarios, the Universal Sans font is the star of the site as it rightfully should be. There are several steps you need to take to customize the font to your taste, with the instructions displayed on the right-hand side of the screen. The different font sizes and weights along with the vertically and horizontally placed text make this website enjoyable to look at, while the cool customizing options make it fun to explore and use.
Black and White Themes
View Collection
Jacob Frederiksen is a creative web developer. His one-page website demonstrates how, with a little bit of creativity and imagination, you can create a stunning introduction of your skillset using only a few elements. The all-caps sans serif font informs viewers about Frederiksen and about what he does. The simplicity of the font beautifully complements the vivaciousness of the featured photos. As you bring the pointer closer to the displayed black-and-white images, their edges bend beneath the force of the mouse. And as you move the pointer over their surface, they become convex. At the same time, moving the mouse up or down the photos adds a duotone effect to them. If you scroll down the site fast, you’ll notice that the text tilts to the right on your way down and to the left as you go back up, towards the top of the page. This playful touch adds more dynamicity to the website, making it more exciting and lively.
When in Nantes, Tangan is the place to go if you wish to rebalance your physical or emotional energy. They will help you do it using three methods – foot reflexology, the Abhyanga massage, and physioscan. The studio’s philosophy and the three methods are stunningly presented on Tangan’s captivating website. Transitions from one section to the next are marked by the changes of the background color, with the black and white backdrops interchangeably used on the homepage. The monochromatic photographs amplify the site’s artistic appeal while the featured videos transport you into the expert hands of Tangan’s professionals. The website is filled with elements that make it fun to browse, such as the horizontally placed animated text that runs from one side of the screen to the other, reminding viewers of the services offered by the studio. There is also a section with a split screen that closely introduces visitors to the services, with textual description on the left and the accompanying imagery on the right. The rest of the site is equally alluring, with the striking combination of black and white elements capturing the viewer’s undivided attention.
Mank: the Unmaking is a stellar black-and-white website dedicated to the biopic “Mank” as part of the digital campaign that highlights the depth of this cinematic masterpiece. The site follows the release of the movie’s art book and is devised as an extension to the book. The fullscreen menu is designed as a table of contents page, with each section displayed next to a specific page number. Horizontal navigation takes you through a selection of movie reels that are presented as a movie tape on the screen. Each reel is clickable, taking you to a fullscreen in-depth presentation of the selected part. You can discover more about the actors, directors, the process of post-production, and much more. Inner pages contain imagery that’s displayed as a movie reel as well, fully immersing you into this memorable cinematic experience.
20/20 Films is a movie production company with a beautiful, cinematic website. The homepage is particularly striking. The company’s elegant, golden logo is placed against an artistic, fullscreen black-and-white image of an eerie, slightly stretched-out face. The strong contrast between the two, as well as the distortion of the image and its monochromatic character, bring out the abstractness and the color of the logo, giving viewers a taste of what the rest of the site is like. On most pages, the background is predominantly white. But on some layouts, such as “Commercials” and “20/20 Photo”, the screen is split in two, with one part colored in black and the other in white. Regardless of the background hue, the featured black-and-white visuals are a constant. The “Films” layout looks like a cinema billboard, with movie announcements plastered all over it. The surface of the white background on this page seems scratched and damaged, and this small detail wonderfully complements the site’s moviesque appeal. The “Journal” page contains numerous vibrant images, but regardless of how many colors there are on this layout, the page doesn’t look too intense because of the neutrality of the white backdrop.
Aēsop’s collection of aromatique candles was inspired by ancient astronomy, hence the products being named after famous astronomers – Ptolemy, Aganice, and Callippus. The intro section provides viewers with a highly enjoyable audio and visual experience, showcasing a ship that’s trying to navigate the turbulent waters relying solely on stars and a lighthouse. As the shooting stars fall from the skies, someone catches one of them and the light of the star transforms into a candle. This cinematic and captivating introduction to the collection is entirely monochromatic and it includes the breathtaking pixelated art by Mattis Dovier. Once the introductory movie is over (we recommend you don’t skip it as it’s nothing short of astounding), you can navigate the nautical world and explore all featured candle collections by clicking on the lighthouse, seagull, etc. Inner pages aesthetically differ from the opening part. They look quite elegant and contain photographs in color, introducing you to the project and the products in a beautiful fashion.
Museum Insel Hombroich is a museum located in Neuss, Germany, and designed by the artist Erwin Heerich. This lovely place unites art, nature, and architecture and the site’s appearance mirrors the simplicity and sharpness of its exterior. The monochromatic visuals are featured on a white background, with details about each exhibition displayed below the photos. When you place your mouse pointer on the featured images, they become colorful. There’s also some text on the left-hand side of the page including menu links. The font used on the whole site was inspired by Erwin Heerich, the artist who designed the museum. His sculptures are known for sharp, clean, precise lines, and the typeface was designed to mirror the look and feel of Heerich’s works. The artistic use of the black-and-white color, gorgeous images, as well as the look and the position of typography make this website look like a digital magazine.
The first thing you notice on the Squad Agency website is the thick and massive white typeface. The length of the uppercase sans serif logo on the left side of the screen matches the length of the imagery on the right. The logo is fixed while the images change, introducing some of the Squad’s models to the audience. Together, the two elements create an electric introduction. As you continue to scroll down the homepage, you will see a lot of text and seemingly not that much imagery. However, the heavy white typography stands out on the black backdrop. The bold font is used in various sizes and styles on the site, making the textual content appear attractive and interesting enough on its own. But as you hover over the models’ names, their images appear in the viewport. The pictures are predominantly in black and white, complementing the aesthetic of the site. The imagery seems almost delicate compared to the massiveness of the Druk font, and the two seem to perfectly balance each other out.
Fontshare is a website created by the Indian Type Foundry. On Fontshare, the ITF shares their high-quality fonts with users for free, making them accessible for those on the lookout for some gorgeous typography. The website is designed in a minimalist fashion that highlights the beauty of the fonts, keeping the viewer’s eyes focused on the displayed letters. The only two colors on the screen are black and white. The contrast between the white background and black fonts ensures every detail of every letter is well-visible. There are also lots of grid lines, keeping all typefaces, menu items, and all website sections separated from one another. The site includes some cool features, such as the possibility of changing the letter style and size on the spot. That way, you can check if a particular font fulfills all of your requirements. Moreover, you can enter some text on your own and see how each font looks in action. And even though there are lots of elements on the site, the interface doesn’t feel overwhelming. The white background tones everything down a bit, ensuring a crisp and enjoyable browsing experience for everyone who visits the site.
Sam Goddard is a creative developer from England. Rather than combining black and white elements on his portfolio website, Sam opted for coupling a black background with light grey typography. While this combination is subtler in contrast, it’s just as eye-catching as the white and black pairing, which is why we decided to feature Sam’s folio site on our list. On his homepage, he used a large, all-caps, serif font for the names of his projects. He separated the projects with a thin underline which works beautifully with the serif letters. The combination of straight lines and soft letters gives the site structure without making it look too harsh and emotionless. When you hover over project names, transparent featured images appear on the screen, providing an almost cinematic invitation to explore each work in detail. Project single layouts are designed in the same style, with the black and light grey content drawing viewers into Sam’s creative world.
The Center for Philosophical Technologies is an initiative of Arizona State University that gathers experts from all walks of life to analyze and discuss all things philosophy, design, and technology. CPT’s website mirrors the vastness of these three fields but also their interconnectedness. That is immediately indicated in the top section of the homepage, where the floating logo is placed. The letters “CPT” ceaselessly move between parentheses – a symbol often used not just to provide additional clarification but also to create a connection between elements. The hidden menu is white but as you move the cursor over the links, a transparent light grey veil appears, covering the menu. The mouse cursor is shaped like a black circle, but when you place it on clickable elements, it extends, assuming the shape of a rectangle with rounded edges. The site is adorned with a beautiful and subtle white and grey gradient. You can see it in the background as well as on the majority of graphic elements. The transition from one color to the next could also be observed as a symbol of the continuous passage between seemingly disconnected fields. All sections of the site are presented on the homepage as gradient squares with barely distinguishable edges, once again indicating how correlated design, philosophy, and technology are. On hover, the edges of the squares become bright as if illuminated with a white LED light, contrasting the subtleness of the surrounding gradients.
Female Faces is a project that addresses female rights through video portraits. The design of this one-page website evokes brutalist vibes as well as the simplicity of the Swiss Style. There is lots of white text on a black canvas as well as large headlines and grid lines that divide the screen into a myriad of smaller sections. At first glance, there are no other colors save for black and white. However, when you reach the bottom of the page or open the hidden menu, you’ll notice the moderately used red gradient. As you explore the homepage and move the mouse pointer over the list of videos, featured images appear behind movie titles, adding a touch of color to the site. Project singles look similar to the homepage except that they also include video previews, inviting you to discover more about this interesting project.
OTK Studio is the design and technology studio of Oliver Thomas Klein. The site’s design is a bit unusual, with the entire content placed in just one section. The screen is divided into two parts – on the left, you can see the list of projects Klein has worked on, and on the right, you can explore the visuals representing each project. Large typography, the black and white content, and the stripped-off design give off slight brutalist vibes. To indicate the type of work he did on each project, Klein opted for tiny, colorful circles, with each color symbolizing a specific action (e.g., art direction, design, etc.). He placed them next to the name of every brand he has worked with. Since the typography is entirely in black, the vibrant colors of the circles pop out even more against the white background. On hover, brand names turn to a bright blue. And when you click on them, a short description of what Klein did on the project appears on the screen along with the featured imagery on the left. The content is beautifully organized, informative, yet concise. This website astoundingly demonstrates Klein’s creativity, introducing viewers to his genius in a memorable and authentic way.
Longshot Features is a production company founded by Joe Talbot and Jimmie Falls. The website leaves a strong first impression on visitors thanks to the black-and-white art of Mattis Dovier. Using the horizontal scroll, you navigate through a series of animated pixelated characters that lure you into the company’s wonderous world of movies. The design of the site evokes film noir vibes, looking simultaneously classic yet contemporary thanks to the interestingly animated content. Each featured character represents one of Longshot’s movies – on click, you will access project single pages that include imagery in color. The website also enables users to play music composed by Joe Talbot, which amplifies the site’s distinct character.
Lena Sitnikova is a freelance web designer. She is known for minimalist designs and her preference for clear aesthetics is apparent on her portfolio website. The white background and the content in black wonderfully complement the minimalist style. The interface is clean, geometric, with lots of white space and not that much text. The screen is split into four equal parts, each representing one section of the site. When you hover over any section, a small rectangle pops up on the screen, telling you what you can learn about if you visit that part of the site. Moreover, the background on almost all sections (save for the first one) changes on hover. In place of a plain white background, a colorful image appears, injecting a touch of life to the site. Inner pages match the design of the homepage – they are simple, containing some geometric elements, but also texts and visuals that help viewers better understand Lena’s work.
Closing Words
Black and white mark opposite sides of the color spectrum and as such, they help create the highest contrast possible between elements. Using black typography on a white background is probably the most readable color scheme there is, but even if you opt for the inverted palette, excellent readability is guaranteed.
The sharp contrast between the two colors ensures even the tiniest of elements are well-visible, which is especially important when, for instance, showing off the characteristics of a typeface. But as you could see, there are certainly no limits to what type of website you can apply this monochromatic scheme to. Designers and developers use it to strikingly present their portfolios while production companies rely on it to enhance the cinematic appeal of their sites.
What all of the websites from our list have in common are gorgeous interfaces and the majestic use of animation and hover effects, grids, and typography that, combined, help enhance the appeal of the showcased content. Some brands have even incorporated splashes of color here and there, breaking the sovereignty of the monochromatic palette. So if you decide to create a black and white website, the fact that you’ll exclusively or predominantly have to rely on only two colors shouldn’t scare you. In fact, by creating an engrossing website using a monochromatic palette and cool effects, you will prove how imaginative and skillful you truly are.
