Opacity — and its opposite, transparency — can be used in website design to create contrast and reinforce a brand’s identity.
Like horizontal scrolling, web textures, and many other web design techniques, opacity and transparency are best used sparingly and intentionally. Below we’ll walk through how to control the opacity of different elements, including:
![Download Now: How to Land a Developer Role in the World of AI [Free Checklist]](https://no-cache.hubspot.com/cta/default/53/8d6a0803-23b3-44d8-a193-5da3a6e366a7.png)
How to Set Opacity in CSS
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible). If you set the property to 1, the element will be completely opaque.
Let’s look at an example of the same div element that’s styled differently with the opacity property. The first div is set to be completely opaque. The last is set to be completely transparent, which is why you can’t see it. The divs in between are set to be varying degrees of translucent.
Here’s the code:
See the Pen How to Set Opacity in CSS by Christina Perricone (@hubspot) on CodePen.
Another way to set the opacity of an element is using RGBA color values. We’ll take a look at this method below.
CSS Background Opacity
You can use the CSS opacity property to make the background of an element more transparent (or less). But beware: The opacity property not only makes the styled element transparent — it also makes its child elements transparent.
In other words, if I style a div that contains text with the opacity property, then both the div and the text in the div will be transparent. That can make the text really difficult to read, as in the example below.
See the Pen Setting Background Opacity with the CSS Opacity Property by Christina Perricone (@hubspot) on CodePen.
If you’d like to set the opacity of an element without affecting its child elements, then you need to use the CSS shorthand background property and RGBA color values instead.
RGB color codes is one way you can change the text color or background color of a web page in CSS. There’s also HTML color names and hex color codes, among other color models. What’s unique about the RGB color model is that you can control the color of an element and the opacity of that color.
To do so, you simply add an “a” to the rgb() prefix and add four values inside the parentheses. The first three numbers represent the intensity of the respective primary color (red, blue, green) as an integer between 0 and 255. The fourth value — ranging from 0 to 1 — sets the transparency of the color. 0 is completely transparent and 1 is completely opaque.
Let’s re-write the example above using the background property and RGBA color code.
See the Pen Setting Background Opacity with RGBA Color Code by Christina Perricone (@hubspot) on CodePen.
To learn more about this and other color models, check out CSS Colors: What You Need to Know About HTML, Hex, RGB & HSL Color Values.
Text Opacity CSS
Setting the opacity of text in CSS is nearly identical to setting the opacity of the background of an element. You can set the opacity of an entire element — the background, text within the element, the border, and everything else — using the opacity property.
To set the opacity of text and only text, then you need to use the CSS color property and RGBA color values. Below, I’ll set a paragraph to be slightly transparent against a dark solid background color.
See the Pen Text Opacity CSS by Christina Perricone (@hubspot) on CodePen.
When adjusting the opacity of text, make sure you maintain a color contrast ratio so that all users — including those with disabilities related to vision — can see and read the text. The current Web Content Accessibility Guidelines (WCAG) require a ratio of 4.5:1 for normal text and a ratio of 3:1 for large text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger. Large text is defined as at least 14 point bolded text or 18 point text.
For more information on color accessibility, check out How to Identify Web Accessible Colors for Products & Websites.
How To Land a Developer Role in the World of AI
A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.
- Expert advice on how to build a portfolio
- Top programming languages to learn
- Resume building and interview tips
- Resources to strengthen communication skills
Download Free
All fields are required.
Border Opacity CSS
Setting the opacity of a border in CSS is like setting the opacity of text. If you’d like to specify the opacity of the border of an element and nothing else, then you need to use the CSS shorthand border property and RGBA color values.
Below, I’ll set the border of a div to be black and very transparent so it provides a shadow effect.
See the Pen BaWwYVw by Christina Perricone (@hubspot) on CodePen.
Image Opacity in CSS
You can set the opacity of an image in CSS as well. The opacity property is frequently used with the :hover selector to style an image. That way, the opacity of the image will change only when a user hovers over it. You have two options.
You can have the image become transparent when the user hovers over it and then become opaque when their mouse moves away. That’s called a transparent hover effect. Or, you can set it so the image is somewhat transparent and then becomes opaque when the user hovers over it. That’s called a reverse transparent hover effect.
In the example below, you’ll see three images. One is set to be 40% see-through, no matter whether a user is hovering over it or not. One is set to be 40% transparent only when the user hovers over it. One is set to be 40% see-through and then change to 100% opaque when the user hovers over it.
See the Pen CSS Image Opacity [With Examples On Hover] by Christina Perricone (@hubspot) on CodePen.
You can also combine the opacity property with the animation or transition property to create a fade-in image transition in CSS.
CSS Opacity Gradient
In CSS, you can create a color gradient that shows one color gradually changing into another in a certain direction like top to bottom, left to right, or diagonally. Rather than changing from one color to a different color (think: red to blue), a gradient could show one color gradually changing from fully opaque to fully transparent.
To create this type of gradient, you can’t use the CSS opacity property. Instead, you’d use the background property and RGBA color values. The process is similar to changing background opacity but instead of defining the background property with one set of RGBA color values, you’ll set the property to “linear-gradient.” Then specify the direction of the gradient and at least two color stops in parentheses. Below is an example, but you can check out a more complete walkthrough, here.
See the Pen bGqoLmL by Christina Perricone (@hubspot) on CodePen.
CSS Color Opacity
We have already looked at several ways to change the opacity of color in CSS. We have focused primarily on the opacity property and RGBA color model. However, there is another way to control the opacity of color in CSS: HSL colors.
HSLA is a color system that allows you to specify the hue, saturation, and lightness as well as the transparency of color.
HSLA is formatted similarly to RGBA color codes. It is composed of three numbers separated by commas. These numbers are then wrapped in parentheses and preceded by a lowercase “hsl.” You can add an “a” to “hsl” and a fourth value between 0 and 1 to set the transparency of the color.
While the first three numbers of RGB color codes represent the intensity of the respective primary color, the first three numbers of HSL color codes represent Hue, Saturation, and Lightness. Hue is measured in degrees on a scale of 0 – 360. Setting hue to 0 or 360 is red, 120 is green, 240 is blue. Saturation and Lightness are measured in percentages on a scale of 0 – 100. Saturation set to 0% is a shade of gray and 100% is the full color. Lightness set to 0% is black and 100% is white.
In the example below, I set the color of one div but don’t add an alpha parameter. As a result, it’s fully opaque by default. I set the color and opacity of the other div so it’s 50% see-through.
See the Pen Setting CSS Color Opacity with HSL Colors by Christina Perricone (@hubspot) on CodePen.
Notice that the text contained within the div is not affected so it is easy to read. That’s why you can change out the RGBA values used in any of the examples above for the respective HSLA values and achieve the same result.
Coding Transparency
If you want to create contrast and make text pop on your website, then you can use the CSS opacity property — or RGBA or HSLA color values — to control the opacity of different elements on the page. You’ll just need to be familiar with some HTML and CSS.
How To Land a Developer Role in the World of AI
A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.
- Expert advice on how to build a portfolio
- Top programming languages to learn
- Resume building and interview tips
- Resources to strengthen communication skills
Download Free
All fields are required.
![How to Create Scrolling Text With CSS [+ Code Examples]](https://www.hubspot.com/hubfs/Google%20Drive%20Integration/scrolling%20text%20css.jpeg)
![How to Center an Image with HTML and CSS [+ Code Modules]](https://www.hubspot.com/hubfs/center-an-image-in-html.jpg)
