Tailwind CSS Opacity Tutorial for Beginners

Opacity controls the transparency level of an element. It helps you create subtle UI effects such as:

Disabled buttons
Muted text
Hover fade effects
Overlay backgrounds
Image transparency

In Tailwind CSS, opacity is applied using simple utility classes without writing custom CSS.

In this guide, you will learn:

How opacity works
How to apply predefined opacity values
How to apply opacity conditionally
How to use custom opacity values
How to use responsive opacity

Let’s start.

What is Opacity in CSS?

In traditional CSS:

opacity: 0.5;

This means the element is 50% visible.

In Tailwind CSS:

<div class="opacity-50"></div>

Very simple and clean.

Basic Opacity Utilities

Tailwind provides percentage-based opacity utilities:

opacity-0
opacity-25
opacity-50
opacity-75
opacity-100

Example Using Tailwind v4 CDN

We will use:

https://unpkg.com/@tailwindcss/browser@4

Complete Working Example

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="bg-gray-100 p-10 space-y-6">

  <button class="bg-indigo-500 text-white px-6 py-3 opacity-100">
    Opacity 100
  </button>

  <button class="bg-indigo-500 text-white px-6 py-3 opacity-75">
    Opacity 75
  </button>

  <button class="bg-indigo-500 text-white px-6 py-3 opacity-50">
    Opacity 50
  </button>

  <button class="bg-indigo-500 text-white px-6 py-3 opacity-25">
    Opacity 25
  </button>

</body>
</html>

As the opacity value decreases, the element becomes more transparent.

Applying Opacity Conditionally

You can apply opacity based on states like disabled, hover, focus, etc.

Example:

<input 
  type="text" 
  placeholder="Disabled Input"
  disabled
  class="border p-3 opacity-100 disabled:opacity-50"
/>

Explanation:

Normal state → opacity 100
Disabled state → opacity 50

This is commonly used for form fields and buttons.

Hover Opacity Example

<button class="bg-blue-600 text-white px-6 py-3 opacity-80 hover:opacity-100 transition">
  Hover Me
</button>

Here:

Default → slightly transparent
Hover → fully visible

This creates a smooth interactive effect.

Using Custom Opacity Values

If predefined values are not enough, you can define custom values.

Example:

<button class="bg-green-600 text-white px-6 py-3 opacity-[.67]">
  Custom Opacity 67%
</button>

You can use any decimal value between 0 and 1.

Using CSS Variable for Opacity

You can also use CSS variables:

<button class="opacity-(--my-opacity)">
  Variable Opacity
</button>

This is shorthand for:

opacity-[var(--my-opacity)]

This is useful in dynamic design systems.

Responsive Opacity

Tailwind follows a mobile-first approach.

Example:

<button class="bg-red-600 text-white px-6 py-3 opacity-50 md:opacity-100">
  Responsive Opacity
</button>

Explanation:

Mobile → 50% opacity
Medium screens and above → 100% opacity

Useful for responsive hero sections and overlays.

Real-World Example: Image Overlay

<div class="relative w-80">
  <img src="https://via.placeholder.com/300" class="rounded-lg">
  <div class="absolute inset-0 bg-black opacity-40 rounded-lg"></div>
</div>

This creates a dark overlay effect on an image.

Best Practices for Beginners

If you are learning Tailwind CSS:

Use opacity for subtle UI effects
Avoid very low opacity on important text
Combine opacity with hover transitions
Use disabled:opacity-* for forms
Test readability before finalizing design

Opacity should enhance design, not reduce usability.

Frequently Asked Questions

What does opacity-50 mean?

It makes the element 50% visible.

How do I apply opacity only when disabled?

Use:

disabled:opacity-50

Can I use decimal values like 0.67?

Yes:

opacity-[.67]

How do I apply opacity only on desktop?

Use:

md:opacity-100

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Tailwind CSS Box Shadow Tutorial for Beginners

Next: Tailwind CSS Cursor Tutorial for Beginners (Complete Guide)

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us