Gettıng started

Flexbox

Box Alignment

Spacing

Sizing

Border

Interaction

Helpers

Back to home

# Text Opacity

You can control the opacity of your text colors as you wish.
Class Property Preview
text-opacity-0 --text-opacity: 0;
mildcss
text-opacity-05 --text-opacity: .05;
mildcss
text-opacity-10 --text-opacity: .1;
mildcss
text-opacity-15 --text-opacity: .15;
mildcss
text-opacity-20 --text-opacity: .2;
mildcss
text-opacity-25 --text-opacity: .25;
mildcss
text-opacity-30 --text-opacity: .3;
mildcss
text-opacity-35 --text-opacity: .35;
mildcss
text-opacity-40 --text-opacity: .4;
mildcss
text-opacity-45 --text-opacity: .45;
mildcss
text-opacity-50 --text-opacity: .5;
mildcss
text-opacity-55 --text-opacity: .55;
mildcss
text-opacity-60 --text-opacity: .6;
mildcss
text-opacity-65 --text-opacity: .65;
mildcss
text-opacity-70 --text-opacity: .7;
mildcss
text-opacity-75 --text-opacity: .75;
mildcss
text-opacity-80 --text-opacity: .8;
mildcss
text-opacity-85 --text-opacity: 8.5;
mildcss
text-opacity-90 --text-opacity: .9;
mildcss
text-opacity-95 --text-opacity: .95;
mildcss
text-opacity-100 --text-opacity: 1;
mildcss

# Usage

Check the opacity of the text with text-opacity-{value}.
100
75
50
25

100
75
50
25

# Responsive

You can adjust the opacity for each screen size. Simply add (screen): to the beginning of the opacity class. Example lg:text-opacity-65 Learn more

# Hover focus and more

There are many selectors, with which you can make your work much more effective and professional. Hover and focus are one of them. Learn more