13 utility classes covering the full opacity range in steps of 10, plus .opacity-25 and .opacity-75 for fine-grained control.
<div class="opacity-50">Half opacity</div> <div class="opacity-75">Three-quarter opacity</div> <img class="opacity-30" src="bg.jpg" alt="">
Drag the slider to see opacity values in real time.
Named classes for common translucency patterns. Each class includes a smooth transition: opacity so state changes animate automatically.
no class (1.0)
.translucent-light (0.85)
.translucent (0.70)
.translucent-heavy (0.50)
<nav class="translucent-light">Subtle overlay navigation</nav> <div class="translucent">Standard transparency for modals or overlays</div> <img class="translucent-heavy" src="watermark.png" alt="watermark">
Apply translucency only on hover — useful for image grids, card overlays, and icon buttons. The transition is built in.
<!-- Subtle image dimming on hover --> <img class="translucent-light-hover" src="photo.jpg" alt=""> <!-- Fade-back effect on icon buttons --> <button class="translucent-hover">...</button>
.translucent-glass combines a semi-transparent white background with backdrop-filter: blur() for a frosted glass effect. Requires content behind the element to be visible.
.translucent-glass
backdrop-filter: blur(8px)
rgba(255,255,255, 0.75)
<!-- Position over a gradient or image background -->
<div class="hero-cover" style="background-image: url(bg.jpg)">
<nav class="translucent-glass p-4">Frosted navbar</nav>
</div>
backdrop-filter is supported in all modern browsers. In browsers that don't support it, the panel falls back gracefully to just the semi-transparent background.
All translucency values are driven by CSS variables, making them easy to override per-theme.
:root {
--dm-translucent-light: 0.85; /* .translucent-light */
--dm-translucent: 0.7; /* .translucent */
--dm-translucent-heavy: 0.5; /* .translucent-heavy */
--dm-translucent-glass-blur: 8px; /* .translucent-glass blur amount */
--dm-translucent-glass-opacity: 0.75; /* .translucent-glass background alpha */
}
/* Override in a dark theme to use a dark glass panel */
[data-theme-variant="dark"] .translucent-glass {
background-color: rgba(0, 0, 0, var(--dm-translucent-glass-opacity));
}
All opacity and translucency utility classes at a glance.