How To Add Transparent Background Sass

Opacity — and its opposite, transparency — can be used in website blueprint to create dissimilarity and reinforce a brand's identity. For example, Bellavista Building Group'due south homepage features a slightly transparent background image with text overlay. This design technique reflects their brand values, which include transparency likewise as integrity and accountability.

Junior developer learning how to set opacity of background in CSS

Bellavista Building Group website uses opacity to set text against a slightly transparent background image

Image Source

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:

background
text
edge
prototype
gradient
color

How to Set Opacity in CSS

To prepare the opacity of a background, image, text, or other chemical element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you fix the belongings to 0, the styled element volition be completely transparent (ie. invisible). If y'all prepare the belongings to 1, the element will be completely opaque.

Let's expect at an case 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 yous tin can't see it. The divs in between are set up to be varying degrees of translucent.

Six div elements side by side styled with the CSS opacity property to go from completely opaque to completely transparent

Here'southward the code:

Encounter the Pen How to Set Opacity in CSS by Christina Perricone (@hubspot) on CodePen.

Another fashion to prepare 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 groundwork of an element more transparent (or less). Just beware: The opacity property not merely makes the styled element transparent — it besides makes its child elements transparent.

In other words, if I fashion a div that contains text with the opacity property, then both the div and the text in the div volition be transparent. That tin brand the text actually difficult to read, as in the case beneath.

Meet 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 demand to utilize the CSS shorthand background belongings and RGBA color values instead.

RGB color codes is one way yous can change the text color or background color of a web folio in CSS. There's also HTML color names and hex color codes, among other color models. What's unique almost the RGB color model is that yous tin control the color of an element and the opacity of that color.

To do so, you lot simply add an "a" to the rgb() prefix and add together four values within the parentheses. The showtime three numbers represent the intensity of the corresponding primary color (red, blue, green) as an integer between 0 and 255. The quaternary value — ranging from 0 to one — sets the transparency of the color. 0 is completely transparent and i is completely opaque.

Let'due south re-write the example above using the background property and RGBA color code.

See the Pen Setting Background Opacity with RGBA Color Lawmaking by Christina Perricone (@hubspot) on CodePen.

To learn more most this and other color models, check out CSS Colors: What You Need to Know About HTML, Hex, RGB & HSL Colour Values .

Text Opacity CSS

Setting the opacity of text in CSS is nearly identical to setting the opacity of the background of an element. Yous can set the opacity of an entire element — the background, text inside the element, the border, and everything else — using the opacity property.

To set up the opacity of text and merely text, then yous need to utilize the CSS color property and RGBA color values. Below, I'll set a paragraph to be slightly transparent against a dark solid background colour.

See the Pen Text Opacity CSS past Christina Perricone (@hubspot) on CodePen.

When adjusting the opacity of text, make sure you maintain a color dissimilarity ratio so that all users — including those with disabilities related to vision — can see and read the text. The electric current Web Content Accessibility Guidelines (WCAG) require a ratio of four.5:ane for normal text and a ratio of 3:one for large text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger. Large text is divers as at least 14 point bolded text or 18 point text.

For more information on colour accessibility, check out How to Identify Web Accessible Colors for Products & Websites .

Border Opacity CSS

Setting the opacity of a border in CSS is similar setting the opacity of text. If you'd similar to specify the opacity of the border of an element and nothing else, then yous need to utilise the CSS shorthand border holding and RGBA color values.

Below, I'll set the border of a div to be black and very transparent then information technology provides a shadow effect.

Run into the Pen BaWwYVw by Christina Perricone (@hubspot) on CodePen.

Paradigm Opacity in CSS

You can set the opacity of an epitome in CSS as well. The opacity property is frequently used with the :hover selector to manner an image. That way, the opacity of the image will modify only when a user hovers over it. You have 2 options.

Y'all can have the image become transparent when the user hovers over it and so become opaque when their mouse moves away. That'due south called a transparent hover issue. Or, you can set it so the prototype is somewhat transparent and then becomes opaque when the user hovers over information technology. That's chosen a opposite transparent hover effect.

In the instance beneath, you'll see 3 images. One is set to be 40% encounter-through, no matter whether a user is hovering over information technology or not. One is set to be 40% transparent only when the user hovers over information technology. One is set up to be xl% come across-through and and so change to 100% opaque when the user hovers over it.

Come across the Pen CSS Epitome Opacity [With Examples On Hover] by Christina Perricone (@hubspot) on CodePen.

You tin 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 tin create a color gradient that shows ane color gradually changing into some other in a certain direction similar top to bottom, left to correct, or diagonally. Rather than changing from ane colour to a different color (think: cerise to blue), a gradient could prove 1 color gradually irresolute from fully opaque to fully transparent.

To create this type of gradient, y'all can't apply the CSS opacity property. Instead, yous'd employ the background belongings 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-slope." And then specify the management of the gradient and at least 2 colour stops in parentheses. Below is an case.

See the Pen bGqoLmL by Christina Perricone (@hubspot) on CodePen.

CSS Color Opacity

Nosotros have already looked at several means to change the opacity of colour in CSS. Nosotros have focused primarily on the opacity property and RGBA colour model. Nonetheless, there is another way to control the opacity of color in CSS: HSL colors.

HSLA is a colour system that allows you lot to specify the hue, saturation, and lightness equally well as the transparency of colour.

HSLA is formatted similarly to RGBA colour codes. It is composed of three numbers separated by commas. These numbers are then wrapped in parentheses and preceded past a lowercase "hsl." Y'all tin can add together an "a" to "hsl" and a fourth value between 0 and i to set the transparency of the color.

While the start three numbers of RGB colour codes represent the intensity of the respective primary colour, the first 3 numbers of HSL colour codes represent Hue, Saturation, and Lightness. Hue is measured in degrees on a scale of 0 – 360. Setting hue to 0 or 360 is ruby-red, 120 is green, 240 is blue. Saturation and Lightness are measured in percentages on a calibration of 0 – 100. Saturation ready to 0% is a shade of grayness and 100% is the full colour. Lightness set to 0% is blackness and 100% is white.

In the example below, I set up the colour of one div but don't add together an alpha parameter. Every bit a upshot, it's fully opaque by default. I gear up the color and opacity of the other div then information technology'due south l% see-through.

Come across the Pen Setting CSS Color Opacity with HSL Colors past Christina Perricone (@hubspot) on CodePen.

Notice that the text contained within the div is not affected so it is like shooting fish in a barrel to read. That's why you can modify out the RGBA values used in whatsoever of the examples to a higher place for the respective HSLA values and achieve the same result.

Coding Transparency

If you want to create contrast and brand text pop on your website, so yous tin use the CSS opacity belongings — or RGBA or HSLA colour values — to command the opacity of unlike elements on the page. Yous'll just need to be familiar with some HTML and CSS.

New Call-to-action