How To Set Opacity Of Background Image In Css

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

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

Prototype Source

Like horizontal scrolling, spider web textures, and many other spider web blueprint techniques, opacity and transparency are best used sparingly and intentionally. Below nosotros'll walk through how to control the opacity of unlike elements, including:

background
text
border
image
slope
color

How to Gear up Opacity in CSS

To fix the opacity of a groundwork, epitome, text, or other element, yous tin use the CSS opacity holding. Values for this property range from 0 to 1. If y'all set the property to 0, the styled element will be completely transparent (ie. invisible). If you set the holding to ane, the chemical element will exist completely opaque.

Let'due south look at an example of the same div element that'southward styled differently with the opacity property. The first div is prepare to be completely opaque. The last is set to be completely transparent, which is why you lot can't see it. The divs in betwixt are prepare 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'south the code:

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

Some other way to set the opacity of an element is using RGBA color values. Nosotros'll take a expect at this method below.

CSS Background Opacity

You can employ the CSS opacity property to make the groundwork of an element more transparent (or less). But beware: The opacity property not only makes the styled chemical 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 volition be transparent. That can brand the text actually difficult to read, as in the example below.

Run across 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, and so you need to use the CSS shorthand background property and RGBA color values instead.

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

To exercise so, y'all just add an "a" to the rgb() prefix and add together iv values inside the parentheses. The first three numbers represent the intensity of the respective primary colour (red, blue, one thousandreen) every bit an integer between 0 and 255. The fourth value — ranging from 0 to i — sets the transparency of the colour. 0 is completely transparent and one is completely opaque.

Let'southward re-write the instance to a higher place using the background property and RGBA color code.

Run into the Pen Setting Groundwork Opacity with RGBA Color Code by Christina Perricone (@hubspot) on CodePen.

To learn more about this and other colour models, cheque out CSS Colors: What You lot Need to Know About HTML, Hex, RGB & HSL Color Values .

Text Opacity CSS

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

To fix the opacity of text and only text, then you lot need to employ the CSS color belongings and RGBA color values. Beneath, I'll ready a paragraph to exist 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 yous maintain a color contrast ratio and then 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 big text such as headings. Large text is defined equally xviii.66px and bold or larger, or 24px or larger. Large text is divers as at least 14 point bolded text or xviii point text.

For more data on colour accessibility, check out How to Identify Spider web Accessible Colors for Products & Websites .

Edge Opacity CSS

Setting the opacity of a border in CSS is similar setting the opacity of text. If yous'd like to specify the opacity of the border of an element and nothing else, then you demand to use the CSS shorthand edge property and RGBA color values.

Below, I'll fix the edge of a div to be blackness 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 too. The opacity property is oft used with the :hover selector to style an paradigm. That style, the opacity of the image will alter only when a user hovers over it. Y'all accept 2 options.

You can accept the image get transparent when the user hovers over information technology and then become opaque when their mouse moves away. That's called a transparent hover effect. Or, you tin ready it and so the image is somewhat transparent and and so becomes opaque when the user hovers over it. That's chosen a reverse transparent hover effect.

In the example below, yous'll see iii images. One is set to be 40% run into-through, no matter whether a user is hovering over information technology or not. One is set to exist 40% transparent just when the user hovers over it. Ane is set to be 40% meet-through and then alter to 100% opaque when the user hovers over it.

See the Pen CSS Image Opacity [With Examples On Hover] past Christina Perricone (@hubspot) on CodePen.

You lot can also combine the opacity belongings 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 slope that shows i color gradually changing into another in a sure direction like meridian to bottom, left to right, or diagonally. Rather than changing from one color to a unlike color (think: red to blue), a slope could show one color gradually changing from fully opaque to fully transparent.

To create this blazon of gradient, you tin't use the CSS opacity belongings. Instead, you lot'd employ the background property and RGBA colour values. The procedure is similar to irresolute background opacity but instead of defining the background property with one set up of RGBA color values, you'll set the property to "linear-gradient." Then specify the management of the slope and at least ii color stops in parentheses. Below is an example.

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

CSS Color Opacity

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

HSLA is a colour organisation that allows y'all to specify the hue, saturation, and lightness as well every bit the transparency of colour.

HSLA is formatted similarly to RGBA color codes. Information technology is composed of three numbers separated by commas. These numbers are then wrapped in parentheses and preceded by a lowercase "hsl." You tin can add together an "a" to "hsl" and a fourth value between 0 and 1 to set the transparency of the color.

While the commencement 3 numbers of RGB color codes represent the intensity of the corresponding primary color, the outset three numbers of HSL colour codes stand for Hue, Saturation, and Lightness. Hue is measured in degrees on a calibration of 0 – 360. Setting hue to 0 or 360 is red, 120 is dark-green, 240 is blueish. Saturation and Lightness are measured in percentages on a calibration of 0 – 100. Saturation set to 0% is a shade of greyness and 100% is the full color. Lightness gear up to 0% is black and 100% is white.

In the example below, I ready the color of one div but don't add an alpha parameter. Equally a result, information technology's fully opaque by default. I set the color and opacity of the other div so information technology'south 50% run across-through.

Meet 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 and so it is easy to read. That'due south why y'all can change out the RGBA values used in any of the examples above for the respective HSLA values and achieve the same event.

Coding Transparency

If yous desire to create contrast and make text popular on your website, then y'all tin can use the CSS opacity property — or RGBA or HSLA color values — to control the opacity of dissimilar elements on the page. Y'all'll just need to exist familiar with some HTML and CSS.

New Call-to-action