3 Reasons To Master The Art Of Opacity and Transparency

3 Reasons To Master The Art Of Opacity and Transparency

Opacity is an aspect of design that’s been lost over the last decade. In the 1990’s, when website design was fairly new, designers used opacity to the max. Background images were sharp around the edges with transparency in the middle where content was displayed. The designs weren’t always perfect, but they were creative, and varying the opacity of elements made them interesting.

Today, finding website elements that play with opacity is rare. For example, despite the popularity of infographics, they’re overdue for an opacity adjustment.

Solid blocks of color with text on top are everywhere. Background images are partially obscured by other elements. Usually, this design trend utilizes high-contrast, bold color schemes like black/yellow, black/red, and yellow/white. This bold style makes text visible, but uninteresting.

Opacity adds continuity to a website in a way that bold colors can’t. Mastering opacity in design restores this important element to modern web design; an element visitors will notice and appreciate.

CSS can create transparency for you 

Not every designer has the time or skills to create final images in Photoshop. Not understanding how to compress layers and save files can result in an image that looks terrible online. If you’re not a Photoshop whiz but want to experiment with opacity, you can do it with CSS. The possibilities are virtually endless.

There was a trendy effect in the 90’s where an image would appear to fade when moused over. The full opacity would return when the mouse was removed from the image. Back in the day, designers had to create both images and use CSS to swap them out. Today, CSS will create the transparency, too, making this website element a prime candidate for revival.

Modern design will benefit from opacity

Like the evolution of cars, modern website designs have become pointy, square, and bold, creating a harsh appearance. Images with transparency can smooth out the visitor’s aesthetic experience by providing some visual softness.

Once in a while, you’ll find a business utilizing opacity with a modern design style. For example, datapine created a simple opacity adjustment to text blocks discussing their online data visualization tools. The transparency restores continuity to a background image that would otherwise be obscured.

A website’s background image isn’t supposed to be the main focus, but will become a subconscious distraction when blocked by solid elements. When a visitor can’t see the whole background image, their brain will be working on overdrive to figure it out. Meanwhile, they’ll be exhausted and won’t know why. A tired, uninterested visitor is going to bounce.

Designs that play with opacity catch more attention

Not many designers play with opacity, so when you do, your designs will stand out more than others by default. When you master the art of adjusting opacity to display images and text, your designs will also be a contribution to your clients’ marketing goals. Transparency can be used to influence purchase decisions by influencing mood. When you master opacity, you can ditch the black blocks of text and high-contrast.


A perfect example of why dark colors should be avoided can be seen in artist Wayne Thiebaud’s work. His colorful shadows are compelling, and demonstrate how easy it is to capture someone’s attention visually.

Shadows aren’t always black, and websites don’t have to be bold.

A template world killed artful opacity

On August 1, 1981, at 12:01 A.M., video officially killed radio. That’s when MTV officially launched with the Buggles’ 1979 hit Video Killed The Radio Star.

Unlike radio, it’s hard to determine the exact moment website templates killed artful opacity in design, but it happened somewhere in the early 2000’s.

With PHP-based platforms like WordPress and Joomla on the rise, DIY designers could no longer create their own designs and had to resort to templates. This reduced the amount of time designers spent experimenting with Photoshop. Less need to experiment with Photoshop resulted in fewer custom, creative designs. Somehow, images with varying opacity faded out of existence.

Bring back a design element that never should have disappeared

Transparency is a trend that should have lived into the designs of the new era. Perhaps a designer’s need to quickly crank out templates replaced the desire to be creative. Maybe the use of opacity is more practical for custom designs than for templates.

Regardless of why transparency left the web design scene, it’s time to bring it back.