Thermal Vision
Four CSS thermal zones power a hover-reactive heat map — from incandescent white to glacial blue, with zero JavaScript.
You'll get access to the interactive demo with a free account.
This effect is part of Effect.Labs — 811 vanilla effects, some free, some premium. Backgrounds has 50 effects, including 6 free. Explore the category →
3 usage examples
How it works
The effect is built entirely in pure CSS — no JavaScript. Four <div> elements each carry a temperature class (thermal-hot, thermal-warm, thermal-cool, thermal-cold) with a radial gradient mimicking the infrared palette: white at the burning core, yellow-orange at the hot edges, then blue-cyan for cool and deep navy for cold.
Each object has an ::after pseudo-element at position: absolute; inset: -8px, inheriting the same gradient and filtered with filter: blur(12px). This soft halo simulates thermal diffusion as seen in real infrared imaging — radiation bleeds beyond the object's physical boundary.
On container hover (.thermal-container:hover), hot zones expand (scale(1.3) for hot, scale(1.15) for warm) and gain colored box-shadow layers simulating energy emission. Cold zones contract (scale(0.9) and scale(0.8)) with a less intense blue halo — physical coherence in pure CSS.
All transitions are driven by a single transition: .5s on .thermal-object and .thermal-object::after, covering transform, box-shadow, opacity, and inset in one declaration. The status label (.thermal-label) also transitions its color from 40% to 80% opacity.
Accessibility
- prefers-reduced-motion not handled: the effect does not check this preference — 0.5 s transitions always run. For WCAG 2.1 §2.3 compliance, add
@media (prefers-reduced-motion: reduce) { .thermal-object, .thermal-object::after, .thermal-label { transition: none; } }. - Hover-only interaction: no
:focusstate triggers the effect — keyboard-only users cannot activate it. Minimal fix: addtabindex="0"to.thermal-containerand extend selectors to:hover, :focus-within. - The four zones are color-coded only — no alternative text or pattern. For functional use (alerts, thresholds), add an
aria-labelor visible text label per zone for colorblind users. - The
.thermal-labeltext ('hover to activate thermal scan') is at 40% opacity at rest — contrast ratio below WCAG AA 4.5:1. It passes at hover (80%), but the resting state is non-compliant. - No ARIA roles are defined on the effect's elements. The container may receive
role="img"andaria-labelto describe the scene to screen readers.
Browser compatibility
Requires CSS gradients, filter: blur(), transform, and CSS transitions — supported in all modern browsers since 2016.
Without <code>filter: blur()</code> (IE 11), the glows disappear but the thermal gradients remain visible — the effect stays readable, just less immersive. No JS errors.
The code
HTML structure to paste into your page (CSS + JS available with a premium account):
<div class="thermal-container">
<div class="thermal-scene">
<div class="thermal-object thermal-hot"></div>
<div class="thermal-object thermal-warm"></div>
<div class="thermal-object thermal-cool"></div>
<div class="thermal-object thermal-cold"></div>
<div class="thermal-label">hover to activate thermal scan</div>
</div>
</div>Full HTML + CSS + JS, copy-paste ready — with hundreds of premium effects.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
| .thermal-hot { background } | radial-gradient(circle, #fff, #ff0, #f80, red) | Gradient stops for the hottest zone. Change colors to adjust the range (e.g. start at yellow if white is too intense, or reverse for a cold-to-hot mapping). |
| .thermal-object { width / height } | 60px | Zone size. Go up to 90-120 px for a full-screen hero, down to 40 px for a compact widget or dense grid. |
| .thermal-object::after { filter: blur() } | blur(12px) | Thermal diffusion radius. Increase to 24-32 px for a diffuse glow on a large dark background; reduce to 6 px for a tighter outline. |
| .thermal-container:hover .thermal-hot { transform } | scale(1.3) | Hot zone expansion on hover. Reduce to scale(1.15) for a subtler response; push to scale(1.5) for a dramatic effect. |
| .thermal-object { transition } | 0.5s | Transition duration. Slow to 1.2 s for a cinematic scan; speed up to 0.15 s for a near-instant response. |
| .thermal-scene { background } | #0a0020 | Scene background. Use #000 for pure infrared black or #0a0a0f to blend with the Effect.Labs dark standard. |
| .thermal-scene { gap } | 16px | Spacing between zones. Increase to 32-48 px for an airy composition, reduce to 8 px for a compact cluster. |
FAQ
tabindex="0" to .thermal-container and extend all .thermal-container:hover selectors to .thermal-container:hover, .thermal-container:focus-within. Users can then trigger the thermal scan with Tab alone — :focus-within is enough, no Enter key required.:hover — there are no CSS keyframes. For an auto-loop, add @keyframes to transform and box-shadow for each class, or trigger the hover state in JavaScript by toggling an .active class on .thermal-container.
