CenturyLink
Lumen
Lumen Enterprise Portal
  • Getting Started
    • Introduction
    • Installation
    • Development workflow
    • Browser support
    • What's new
  • Foundations
      • Overview
      • Using the keyboard
      • Page structure
      • Color and sensory
      • Images
      • Text
      • Links and forms
      • Tables
      • Other
      • Color
      • Design tokens
      • Grid
  • Components
    • Accordion
    • Activity
    • Alert
    • Avatar
    • Badge
    • Brand
    • Breadcrumb
    • Button
    • Button group
    • Cache Loader
    • Card
    • Carousel
    • Checkbox
    • Copy text
    • Data table
    • Date picker
    • Divider
    • Drawer
    • Dropdown
    • Expansion panel
    • File input
    • Flag icon
    • Footer
    • Header
    • Icon
    • Label
    • Link
    • Marketing icon
    • Mobile navigation
    • Modal
    • Number input
    • Pagination
    • Phone Input
    • Picker
    • Picker group
    • Popover
    • Price
    • Progress
    • Radio button
    • Range slider
    • Search input
    • Select
    • Sidenav
    • Skeleton
    • Spinner
    • Stat
    • Steps
    • Table
    • Tabs
    • Tags
    • Text input
    • Textarea
    • Time picker
    • Toggle switch
    • Toolbar
    • Tooltip
    • Transfer list
  • Utilities
    • Border
    • Color
    • Display
    • Flex
    • Image
    • Opacity
    • Overflow
    • Position
    • Shadow
    • Sizing
    • Spacing
    • Text
    • Vertical-align
    • Z-index
  • Templates
    • App Layout
    • Card
    • Error 404
    • Error 500
    • State

Opacity

Use to change the opacity of an element.

Examples#

Responsive#

Responsive opacity classes can be defined using the format -opacity[-{breakpoint}]--{value} and -opacity-hover[-{breakpoint}]--{value}. Breakpoints supported are sm, md, lg, and xl.

Target all breakpoints#

Opacity utility classes with no breakpoint defined apply to all screen sizes.

Base#

Class
Value
-opacity--0opacity: 0;
-opacity--20opacity: 0.2;
-opacity--40opacity: 0.4;
-opacity--60opacity: 0.6;
-opacity--80opacity: 0.8;
-opacity--100opacity: 1;

Hover#

Class
Value
-opacity-hover--0opacity: 0;
-opacity-hover--20opacity: 0.2;
-opacity-hover--40opacity: 0.4;
-opacity-hover--60opacity: 0.6;
-opacity-hover--80opacity: 0.8;
-opacity-hover--100opacity: 1;

Target specific breakpoints#

To target a specific breakpoint, add the breakpoint abbreviation to the class. As Chi is a mobile first library, the value will apply to that specific breakpoint and up.

Base#

Class
Value
-opacity-sm--6060% opacity on sm and up.
-opacity-md--6060% opacity on md and up.
-opacity-lg--6060% opacity on lg and up.
-opacity-xl--6060% opacity on xl and up.

Hover#

Class
Value
-opacity-hover-sm--6060% opacity on hover on sm and up.
-opacity-hover-md--6060% opacity on hover on md and up.
-opacity-hover-lg--6060% opacity on hover on lg and up.
-opacity-hover-xl--6060% opacity on hover on xl and up.