This article was last updated on the January 2, 2017.
Oftentimes we receive inquiries from users on how to recreate a particular effect from another website. One of the more popular requests is how to include a transparent color on elements so that background content shows through. This could be in reference to text, but it is also frequently desired for elements such as a fixed navbar where the background color is slightly transparent so you can see content moving behind it as you scroll up and down the page (a really good example of this is Spotify’s website, where you can see that the navbar isn't completely opaque). In this article our aim is to provide you with multiple methods for achieving this effect as desired and to inform you on the pros and cons of each procedure so that you can make a more informed decision when implementing your customizations.
Opacity is one of the more commonly known CSS properties that people are aware of when trying to achieve an effect like this, but there are some caveats to utilizing opacity properly that are important to understand as it might not give you the precise effect you're after based on how you use it.
Utilizing opacity on an element is simple enough. Simply select the element you're wanting to target in CSS, then apply the opacity property as seen below:
The opacity property accepts a number value between 1 and 0, with 1 being opaque and 0 being fully transparent. Decimal values can also be used and correspond to a percentage of how much transparency you want to show (the example above means that the target element would be 75% opaque).
The thing to be aware of with the opacity property is that setting opacity on an element will apply that same opacity to all child elements as well. This is the most common misunderstanding of how opacity works, as many people will apply it to an element hoping to target just that element and then become confused as to why everything else within that element (i.e. images, text, et cetera), has become transparent as well.
We can easily see this in the example provided below. Let's say that we wanted to target our navbar element so that we can make the background transparent:
The natural inclination would be to target the element in question (e.g. .x-navbar) and apply some opacity to it. However, in doing so we can see that not only does the background become slightly transparent, but all child elements and text follow suit:
While this method isn't a good candidate for this type of scenario, it is certainly very applicable for a situation where you do want all child elements within an element to maintain the same level of transparency. It's also great as opacity can also be applied to images, lending a consistency of appearance across all elements. Some websites will use this technique to designate "inactive" or "disabled" elements, and upon making a selection in a form or hovering over a transparent element, then they will remove all opacity to show it as "active."
If you've done any work in a photo editor, you're likely familiar with the RGB color palette (i.e. red, blue, and green). RGBa colors utilize these red, blue, and green values in various combinations to create desired colors along with the alpha transparency value (the "a") that can be altered to specify the amount of opacity to apply to a particular color. As Chris Coyier puts it in his article on CSS-Tricks:
RGBa is a way to declare a color in CSS that includes alpha transparency support...This allows us to fill areas with transparent color; the first three numbers representing the color in RGB values and the fourth representing a transparency value between 0 and 1 (zero being fully transparent and one being fully opaque). We have long had the opacity property, which is similar, but opacity forces all descendant elements to also become transparent and there is no way to fight it (except weird positional hacks).
Essentially, RGBa allows us to work around the nuance presented by the opacity method above in that it does not affect all child elements (it is applied via properties such as color or background-color, so it is more or less relegated the element you are applying it to unless the style cascades down in certain situations).
As mentioned above, RGBa colors are applied via properties such as color or background-color in CSS. You can think of RGBa colors as a replacement for the more commonly used variants such as actual color names (e.g. "white") or hex values (e.g. #fff). For example, if you wanted to target a particular element and change its background color to be white with 50% transparency, you would use the following:
background-color: rgba(255, 255, 255, 0.5);
The first three values work on a scale of 0 to 255, with 0 being the darkest and 255 being the lightest. The first 255 above corresponds to the red value of the color, the second to the green value, and the third to the blue value. Setting all three values to 255 returns white, whereas setting all values to 0 returns black. If all of this sounds confusing, don't worry! You can easily utilize an online service such as this one by Brandon Mathis to ascertain the appropriate values for a color you want to use. In keeping with our previous example, let's try applying a white background color to our navbar element with 50% transparency:
Notice how the background color of the navbar became slightly transparent, but the text remained the same. As you can see, this is immensely useful for countless situations and affords users a great deal of flexibility when creating color palettes on their website.
One final color option to consider using if attempting to achieve a level of transparency in your palettes is HSLa. HSLa colors are similar to RGBa colors in that setting an amount of transparency with this option will not necessarily affect child elements like opacity would. HSLa stands for hue, saturation, and lightness (with the same alpha transparency value as mentioned for RGBa colors). Some users consider HSLa to be a little more cumbersome to work with, while others feel it is more intuitive to manage once you get the hang of how it works. For programmers, HSLa makes programmatically implementing color palettes much easier, so it's a great option if you're planning on doing something more dynamic with your website. For a more extensive write-up on HSLa colors and how to use them, check out Chris Coyier's excellent article on CSS-Tricks.
If you're just beginning to use HSLa colors on your website, they might not be completely intuitive to you at first as previously mentioned. To make things easier, try using an online color picking service like this one by Brandon Mathis that streamlines this process to make it simple and efficient. Just to see how you would apply an HSLa color to an element, let's give our example element a white background with 50% transparency:
background-color: hsla(360, 100%, 100%, 0.5);
Again, we can see this same technique in action in keeping with our previous navbar examples. Here is how that would look in a real life situation:
Once again, notice how the background has become slightly transparent while leaving the text in the navbar unaffected.
Ultimately, the method of choice that you end up taking advantage of will depend on the situation that you plan on using it in. Keep in mind all of the information listed above so that you can make appropriate decisions when necessary. For the most part, you'll probably find working with RGBa/HSLa colors to be a little more in alignment with what you're looking to accomplish in terms of applying a color with some transparency to only one element and not all child elements within a parent as opacity does. The biggest takeaways from the various methods outlined in this article are the following:
Opacity – Applied via the "opacity" property, which accepts number values (including decimals) from 0 to 1 (0 being fully transparent and 1 being fully opaque). Applying opacity to an element will also apply that same opacity to all child elements, so keep this effect in mind as it is not always desirable.
RGBa – Stands for red, blue, green, and alpha transparency and is used as a color replacement for hex values on CSS properties like "color" and "background-color." Applying transparency via this method will not necessarily cascade down to other child elements, making it desirable in implementing subtle background or text color transparency.
HSLa – Stands for hue, saturation, lightness, and alpha transparency and is used as a color replacement for hex values on CSS properties like "color" and "background-color." Applying transparency via this method will not necessarily cascade down to other child elements, making it desirable in implementing subtle background or text color transparency.
As always, thanks for checking out the Knowledge Base!