Utilities for controlling the opacity of an element.

React propsCSS Properties
opacity={ratio}opacity: {ratio};


Control the opacity of an element using the opacity={ratio} utilities.

<x.div opacity={1} /> <x.div opacity={0.75} /> <x.div opacity={0.5} /> <x.div opacity={0.25} /> <x.div opacity={0} />


To control the opacity of an element at a specific breakpoint, use responsive object notation. For example, adding the property opacity={{ md: 0.5 }} to an element would apply the opacity={0.5} utility at medium screen sizes and above.

<x.div opacity={{ md: 0.5 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub