Opacity

BrandonDusch's avatar
Published Jun 8, 2022Updated Apr 16, 2023
Contribute to Docs

Opacity correlates to transparency or the amount of light that passes through an object. An object with high opacity has low transparency, meaning little or no light can pass through.

If an object is completely opaque like a solid wood door, no light can pass through, and anything behind the door will not be visible. In contrast, a partially opaque object, like a window covered by a thin curtain, allows light to pass through and objects behind the window will be somewhat visible.

In design software, the fill typically defaults to 100% opacity. As the opacity is lowered, the layer will become more transparent and any colors or shapes behind the layer will become visible.

Four sets of overlapping purple squares on a white background. The first set of squares has 100% opacity, and the opacity decreases for each set: 75%, 50%, and then 25%.

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Get started with User Interface (UI) and User Experience (UX) Design and learn how to wireframe and prototype using Figma.
    • Beginner Friendly.
      2 hours

All contributors

Contribute to Docs

Learn UI and UX Design on Codecademy

  • Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Get started with User Interface (UI) and User Experience (UX) Design and learn how to wireframe and prototype using Figma.
    • Beginner Friendly.
      2 hours