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.

<> <template preview> <x.div display="grid" gap={5} gridTemplateColumns={{ sm: 2, lg: 5 }} p={3}> {[1, 0.75, 0.5, 0.25, 0].map((opacity) => ( <x.div p={6} bg="amber-500" color="white" textAlign="center" fontWeight="medium" display="flex" alignItems="center" justifyContent="center" borderRadius opacity={opacity} > {opacity} </x.div> ))} </x.div> </template> <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