LEARN

Tailwind Opacity

Use responsive opacity utilities with Pagedone. See how to easily and simply change the opacity.

Tailwind CSS offers utility classes for manipulating opacity, allowing you to control the transparency of an element easily.

Utilitiy classes in Tailwind css

This classis are predefine by tailwind css you can easily use this classes.

Class

Properties

  • opacity-0

    opacity: 0;

  • opacity-5

    opacity: 0.05;

  • opacity-10

    opacity: 0.1;

  • opacity-15

    opacity: 0.15;

  • opacity-20

    opacity: 0.2;

  • opacity-25

    opacity: 0.25;

  • opacity-30

    opacity: 0.3;

  • opacity-35

    opacity: 0.35;

  • opacity-40

    opacity: 0.4;

  • opacity-45

    opacity: 0.45;

  • opacity-50

    opacity: 0.5;

  • opacity-55

    opacity: 0.55;

  • opacity-60

    opacity: 0.6;

  • opacity-65

    opacity: 0.65;

  • opacity-70

    opacity: 0.7;

  • opacity-75

    opacity: 0.75;

  • opacity-80

    opacity: 0.8;

  • opacity-85

    opacity: 0.85;

  • opacity-90

    opacity: 0.9;

  • opacity-95

    opacity: 0.95;

  • opacity-100

    opacity: 1;

Opacity with Buttons

Control the opacity of an button element using the opacity-{amount} utilities.

opacity-100

opacity-75

opacity-50

opacity-25

<button type="button" class="opacity-100 py-2.5 px-6 text-sm bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700">Primary</button>
<button type="button" class="opacity-75 py-2.5 px-6 text-sm bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700">Primary</button>
<button type="button" class="opacity-50 py-2.5 px-6 text-sm bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700">Primary</button>
<button type="button" class="opacity-25 py-2.5 px-6 text-sm bg-indigo-500 text-white rounded-lg cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-indigo-700">Primary</button>

text opacity

To change the opacity of text in Tailwind CSS, the “text-opacity” utility class is used provided by the framework. The class follows the format “text-opacity-<value>”, where “<value>” can be a number from 0 to 100. Users need to define the desired opacity level with the specific opacity percentage.

Class

Properties

  • text-opacity-0

    text-opacity: 0;

  • text-opacity-5

    text-opacity: 0.05;

  • text-opacity-10

    text-opacity: 0.1;

  • text-opacity-15

    text-opacity: 0.15;

  • text-opacity-20

    text-opacity: 0.2;

  • text-opacity-25

    text-opacity: 0.25;

  • text-opacity-30

    text-opacity: 0.3;

  • text-opacity-35

    text-opacity: 0.35;

  • text-opacity-40

    text-opacity: 0.4;

  • text-opacity-45

    text-opacity: 0.45;

  • text-opacity-50

    text-opacity: 0.5;

  • text-opacity-55

    text-opacity: 0.55;

  • text-opacity-60

    text-opacity: 0.6;

  • text-opacity-65

    text-opacity: 0.65;

  • text-opacity-70

    text-opacity: 0.7;

  • text-opacity-75

    text-opacity: 0.75;

  • text-opacity-80

    text-opacity: 0.8;

  • text-opacity-85

    text-opacity: 0.85;

  • text-opacity-90

    text-opacity: 0.9;

  • text-opacity-95

    text-opacity: 0.95;

  • text-opacity-100

    text-opacity: 1;

Pagedone <text-opacity-100>
Pagedone <text-opacity-75>
Pagedone <text-opacity-50>
Pagedone <text-opacity-25>
<h6 class="text-xl text-gray-900 font-semibold leading-10 text-opacity-100">Pagedone</h6>
<h6 class="text-xl text-gray-900 font-semibold leading-10 text-opacity-75">Pagedone</h6>
<h6 class="text-xl text-gray-900 font-semibold leading-10 text-opacity-50">Pagedone</h6>
<h6 class="text-xl text-gray-900 font-semibold leading-10 text-opacity-25">Pagedone</h6>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

background opacity Tailwind

To modify the transparency of the background in Tailwind CSS, the “bg-opacity-<value>” utility class is used. Users need to define the desired opacity level by changing the “<value>” with the specific opacity percentage.

Class

Properties

  • bg-opacity-0

    bg-opacity: 0;

  • bg-opacity-5

    bg-opacity: 0.05;

  • bg-opacity-10

    bg-opacity: 0.1;

  • bg-opacity-15

    bg-opacity: 0.15;

  • bg-opacity-20

    bg-opacity: 0.2;

  • bg-opacity-25

    bg-opacity: 0.25;

  • bg-opacity-30

    bg-opacity: 0.3;

  • bg-opacity-35

    bg-opacity: 0.35;

  • bg-opacity-40

    bg-opacity: 0.4;

  • bg-opacity-45

    bg-opacity: 0.45;

  • bg-opacity-50

    bg-opacity: 0.5;

  • bg-opacity-55

    bg-opacity: 0.55;

  • bg-opacity-60

    bg-opacity: 0.6;

  • bg-opacity-65

    bg-opacity: 0.65;

  • bg-opacity-70

    bg-opacity: 0.7;

  • bg-opacity-75

    bg-opacity: 0.75;

  • bg-opacity-80

    bg-opacity: 0.8;

  • bg-opacity-85

    bg-opacity: 0.85;

  • bg-opacity-90

    bg-opacity: 0.9;

  • bg-opacity-95

    bg-opacity: 0.95;

  • bg-opacity-100

    bg-opacity: 1;

opacity-100

opacity-75

opacity-50

opacity-25

<div class="bg-opacity-100 bg-indigo-500  rounded-lg w-24 h-24"></div>
<div class="bg-opacity-75 bg-indigo-500  rounded-lg w-24 h-24"></div>
<div class="bg-opacity-50 bg-indigo-500  rounded-lg w-24 h-24"></div>
<div class="bg-opacity-25 bg-indigo-500  rounded-lg w-24 h-24"></div>

Opacity as a image overlay

Use opacity as a overlay background of image to clearly shows text over image.

image

Vintage cars

A vintage car, also known as a classic car, is typically defined as a vehicle manufactured between the early 1900s and the 1970s, although the specific time period may vary depending on the individual or organization. 

 <div class="w-full max-w-lg h-64 rounded-lg shadow-2xl overflow-hidden relative">
<img class="absolute inset-0 h-full w-full object-cover" src="https://pagedone.io/asset/uploads/1688031162.jpg" alt="image" />
<div class="absolute inset-0 bg-gray-900 bg-opacity-75"></div>
<div class="flex h-full  relative">
<div class="p-6 w-full h-full ">
<h3 class="text-3xl font-manrope font-semibold text-white mb-6">Vintage cars</h3>
<p class="text-base leading-6 text-white font-normal mb-3"> A vintage car, also known as a classic car, is typically defined as a vehicle manufactured between the early 1900s and the 1970s, although the specific time period may vary depending on the individual or organization. </p>
<button type="button" class="py-2.5 px-6 text-sm rounded-lg bg-transparent border border-white  text-white cursor-pointer font-bold text-center shadow-xs transition-all duration-500 hover:bg-white/25 hover:text-white">Book A Ride</button>
</div>
</div>
</div>

Opacity as an animation effect

Use opacity as a animation on hover by using tailwind css utility classes. 

 <div class="px-4 box-content md:flex justify-center gap-3 group w-18 mx-auto">
<div class="h-16 w-16 bg-indigo-500 opacity-25 rounded-lg shadow-xl transform group-hover:opacity-100 transition duration-200"></div>
<div class="h-16 w-16 bg-indigo-500 opacity-25 rounded-lg shadow-xl transform group-hover:opacity-100 transition duration-300"></div>
<div class="h-16 w-16 bg-indigo-500 opacity-25 rounded-lg shadow-xl transform group-hover:opacity-100 transition duration-500"></div>
<div class="h-16 w-16 bg-indigo-500 opacity-25 rounded-lg shadow-xl transform group-hover:opacity-100 transition duration-1000"></div>
</div>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More