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
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.