Ring opacity

Utilities for setting the opacity of outline rings.


Class reference

ClassProperties
ring-opacity-5--tw-ring-opacity: 0.05;
 
ring-opacity-10--tw-ring-opacity: 0.1;
 
ring-opacity-15--tw-ring-opacity: 0.15;
 
ring-opacity-20--tw-ring-opacity: 0.2;
 
ring-opacity-25--tw-ring-opacity: 0.25;
 
ring-opacity-30--tw-ring-opacity: 0.3;
 
ring-opacity-35--tw-ring-opacity: 0.35;
 
ring-opacity-40--tw-ring-opacity: 0.4;
 
ring-opacity-45--tw-ring-opacity: 0.45;
 
ring-opacity-50--tw-ring-opacity: 0.5;
 
ring-opacity-55--tw-ring-opacity: 0.55;
 
ring-opacity-60--tw-ring-opacity: 0.6;
 
ring-opacity-65--tw-ring-opacity: 0.65;
 
ring-opacity-70--tw-ring-opacity: 0.7;
 
ring-opacity-75--tw-ring-opacity: 0.75;
 
ring-opacity-80--tw-ring-opacity: 0.8;
 
ring-opacity-85--tw-ring-opacity: 0.85;
 
ring-opacity-90--tw-ring-opacity: 0.9;
 
ring-opacity-95--tw-ring-opacity: 0.95;
 

# Usage

Use the ring-opacity-{amount} utilities to set the opacity of an outline ring.

<button class="... ring-4 ring-red-400 ring-opacity-25">
Button
</button>

# Responsive

To control the ring opacity at a specific breakpoint, add a {screen}: prefix to any existing ring opacity utility. For example, use md:ring-opacity-50 to apply the ring-opacity-50 utility at only medium screen sizes and above.

<button class="ring-2 ring-blue ring-opacity-75 md:ring-opacity-50">
<!-- ... -->
</button>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.