Opacity & Translucency

A complete opacity scale (0-100) and semantic translucency utilities, including a frosted-glass variant.

Opacity Scale

13 utility classes covering the full opacity range in steps of 10, plus .opacity-25 and .opacity-75 for fine-grained control.

Opacity Scale
.opacity-100
.opacity-90
.opacity-80
.opacity-75
.opacity-70
.opacity-60
.opacity-50
.opacity-40
.opacity-30
.opacity-25
.opacity-20
.opacity-10
.opacity-0 
<div class="opacity-grid mb-4"><div class="opacity-swatch">
        <div class="opacity-box opacity-100"></div>
        <span class="opacity-label">.opacity-100</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-90"></div>
        <span class="opacity-label">.opacity-90</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-80"></div>
        <span class="opacity-label">.opacity-80</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-75"></div>
        <span class="opacity-label">.opacity-75</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-70"></div>
        <span class="opacity-label">.opacity-70</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-60"></div>
        <span class="opacity-label">.opacity-60</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-50"></div>
        <span class="opacity-label">.opacity-50</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-40"></div>
        <span class="opacity-label">.opacity-40</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-30"></div>
        <span class="opacity-label">.opacity-30</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-25"></div>
        <span class="opacity-label">.opacity-25</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-20"></div>
        <span class="opacity-label">.opacity-20</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-10"></div>
        <span class="opacity-label">.opacity-10</span>
    </div>
    <div class="opacity-swatch">
        <div class="opacity-box opacity-0"></div>
        <span class="opacity-label">.opacity-0</span>
    </div>
</div>

Usage

<div class="opacity-50">Half opacity</div>
<div class="opacity-75">Three-quarter opacity</div>
<img class="opacity-30" src="bg.jpg" alt="">

Interactive Demo

Drag the slider to see opacity values in real time.

Interactive Demo
Aa
opacity: 1 → class="opacity-100"
<div class="interactive-demo"><div id="opacity-target" class="interactive-target">Aa</div>
    <div class="opacity-controls">
        <input id="opacity-slider" type="range" min="0" max="100" value="100" step="10">
        <div id="opacity-readout">opacity: 1  →  class="opacity-100"</div>
    </div>
</div>
/**
 * Interactive Demo - from public/showcase/css-utilities.
 */
export function mount(root) {
        /* ── Interactive slider demo ─────────────────────── */
    const $target = $(root).find('#opacity-target');
    const $readout = $(root).find('#opacity-readout');
    const opacityMap = {
            0: '0', 10: '0.1', 20: '0.2', 25: '0.25', 30: '0.3',
            40: '0.4', 50: '0.5', 60: '0.6', 70: '0.7', 75: '0.75',
            80: '0.8', 90: '0.9', 100: '1'
        };
        // Snap slider to nearest supported step
    const steps = [0, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100];
    function nearest(val) {
            return steps.reduce((prev, curr) =>
                Math.abs(curr - val) < Math.abs(prev - val) ? curr : prev
            );
        }
    $(root).find('#opacity-slider').on('input', function () {
            const raw  = parseInt($(this).val());
            const snapped = nearest(raw);
            $(this).val(snapped);
            const opacityVal = opacityMap[snapped];
            $target.css('opacity', opacityVal);
            $readout.text(`opacity: ${opacityVal}  →  class="opacity-${snapped}"`);
        });
}

Translucent Utilities

Named classes for common translucency patterns. Each class includes a smooth transition: opacity so state changes animate automatically.

Translucent Utilities
Full opacity no class (1.0)
Light .translucent-light (0.85)
Standard .translucent (0.70)
Heavy .translucent-heavy (0.50) 
<div class="translucent-grid mb-4"><div class="translucent-card">
        Full opacity
        <code>no class (1.0)</code>
    </div>
    <div class="translucent-card translucent-light">
        Light
        <code>.translucent-light (0.85)</code>
    </div>
    <div class="translucent-card translucent">
        Standard
        <code>.translucent (0.70)</code>
    </div>
    <div class="translucent-card translucent-heavy">
        Heavy
        <code>.translucent-heavy (0.50)</code>
    </div>
</div>

Usage

<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">

Hover Variants

Apply translucency only on hover - useful for image grids, card overlays, and icon buttons. The transition is built in.

Hover Variants
Hover me .translucent-light-hover
Hover me .translucent-hover
Hover me .translucent-heavy-hover 
<div class="hover-demo-row mb-4"><div class="hover-box translucent-light-hover">
        Hover me
        <span>.translucent-light-hover</span>
    </div>
    <div class="hover-box translucent-hover">
        Hover me
        <span>.translucent-hover</span>
    </div>
    <div class="hover-box translucent-heavy-hover">
        Hover me
        <span>.translucent-heavy-hover</span>
    </div>
</div>

Usage

<!-- 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>

Frosted Glass

.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.

Frosted Glass
Glass Panel .translucent-glass
Frosted Card backdrop-filter: blur(8px)
Overlay UI rgba(255,255,255, 0.75) 
<div class="glass-bg mb-4"><div class="glass-panel translucent-glass">
        <strong>Glass Panel</strong>
        <code>.translucent-glass</code>
    </div>
    <div class="glass-panel translucent-glass">
        <strong>Frosted Card</strong>
        <code>backdrop-filter: blur(8px)</code>
    </div>
    <div class="glass-panel translucent-glass">
        <strong>Overlay UI</strong>
        <code>rgba(255,255,255, 0.75)</code>
    </div>
</div>

Usage

<!-- 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>

Browser support: 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.

CSS Variables

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));
}

Reference

All opacity and translucency utility classes at a glance.

Reference
<div id="reference-table"></div>
/**
 * Reference - from public/showcase/css-utilities.
 */
export function mount(root) {
        /* ── Reference table ─────────────────────────────── */
    const rows = [
            { cls: 'opacity-0',   type: 'Opacity',     value: '0',    note: 'Fully invisible' },
            { cls: 'opacity-10',  type: 'Opacity',     value: '0.1',  note: '' },
            { cls: 'opacity-20',  type: 'Opacity',     value: '0.2',  note: '' },
            { cls: 'opacity-25',  type: 'Opacity',     value: '0.25', note: 'Quarter opacity' },
            { cls: 'opacity-30',  type: 'Opacity',     value: '0.3',  note: '' },
            { cls: 'opacity-40',  type: 'Opacity',     value: '0.4',  note: '' },
            { cls: 'opacity-50',  type: 'Opacity',     value: '0.5',  note: 'Half opacity' },
            { cls: 'opacity-60',  type: 'Opacity',     value: '0.6',  note: '' },
            { cls: 'opacity-70',  type: 'Opacity',     value: '0.7',  note: '' },
            { cls: 'opacity-75',  type: 'Opacity',     value: '0.75', note: 'Three-quarter opacity' },
            { cls: 'opacity-80',  type: 'Opacity',     value: '0.8',  note: '' },
            { cls: 'opacity-90',  type: 'Opacity',     value: '0.9',  note: '' },
            { cls: 'opacity-100', type: 'Opacity',     value: '1',    note: 'Fully visible' },
            { cls: 'translucent-light',       type: 'Translucent', value: 'var(--dm-translucent-light) = 0.85',  note: 'Subtle - watermarks, overlays' },
            { cls: 'translucent',             type: 'Translucent', value: 'var(--dm-translucent) = 0.7',        note: 'Standard translucency' },
            { cls: 'translucent-heavy',       type: 'Translucent', value: 'var(--dm-translucent-heavy) = 0.5',  note: 'Strong - ghost elements' },
            { cls: 'translucent-glass',       type: 'Glass',       value: 'rgba(255,255,255,0.75) + blur(8px)', note: 'Frosted glass effect' },
            { cls: 'translucent-light-hover', type: 'Hover',       value: '0.85 on :hover',  note: 'Smooth transition included' },
            { cls: 'translucent-hover',       type: 'Hover',       value: '0.7 on :hover',   note: 'Smooth transition included' },
            { cls: 'translucent-heavy-hover', type: 'Hover',       value: '0.5 on :hover',   note: 'Smooth transition included' },
        ];
    T.create('#reference-table', {
            data: rows,
            columns: [
                { key: 'cls',   label: 'Class',       render: v => `<code>${v}</code>` },
                { key: 'type',  label: 'Type' },
                { key: 'value', label: 'Value' },
                { key: 'note',  label: 'Notes' },
            ],
            pagination: false,
        });
}