Katkat
Back

Which CSS function supports opacity?

TomaFrontend Engineer · Technical Screen
EasyFrontend EngineerTechnical ScreenSoftware Engineering Fundamentals

Last updated

This question tests your knowledge of modern CSS color syntax and the various ways to define transparency within style rules.

Problem Statement

In modern web development, there are multiple ways to define colors and their associated opacity in CSS. Suppose you are styling a component that requires a specific primary brand color with 50% opacity.

  1. Explain the difference between using the opacity property versus using a color function with an alpha channel.
  2. Provide the syntax for applying 50% transparency to a hex code color #3498db using a modern CSS color function.
  3. Demonstrate how to define a color with transparency using rgba().

Examples

Example 1: Using rgba() If your base color is red (#ff0000), the rgba() syntax would be:

background-color: rgba(255, 0, 0, 0.5);

Example 2: Using modern syntax If you want to use the newer functional notation for the same color:

background-color: rgb(255 0 0 / 0.5);

Constraints

  • Your solution should focus on browser-compatible CSS standards.
  • Consider how parent element opacity affects child elements when using the opacity property versus color-specific transparency.

Hints

Hint 1

Consider whether the `opacity` property affects the element's children or just the element itself.

Hint 2

Look into the CSS Color Module Level 4 specification regarding the slash (/) separator in color functions.

Hint 3

Think about how hexadecimal colors can be expanded to include an alpha channel (e.g., #RRGGBBAA).

Follow-up questions

  • How does setting 'opacity: 0.5' on a container affect the visibility of nested child elements compared to 'background-color: rgba(...)'?
  • Can you explain the benefits of using HSL or HWB color functions over RGB when trying to manipulate color lightness or transparency?
  • If you have a design system with many variables, how would you manage color transparency dynamically using CSS custom properties?