Pixelate Effect
8-bit style pixelation on hover.
The code
A glimpse of the source:
index.html
<div class="pixelate-box" id="pixelateBox">
<div class="pixel-grid" id="pixelGrid">
<div class="pixel-cell">
</div>
<div class="pixel-cell">
</div>
<div class="pixel-cell">
</div>
<div class="pixel-cell">
</div>
🔒 Unlock the full code
Full HTML + CSS + JS, copy-paste-ready — with 800 more Premium effects.
Concrete use cases
A few real contexts where Pixelate Effect shines:
- A hover effect on a thumbnail
- A creative site intro
- A striking hero title
How it works
CSS + a lightweight vanilla JavaScript script (no dependency). It relies on CSS filters.
Make it yours
You can tweak:
- the colors, size and timing straight in the CSS
Add it in 3 steps
- Paste the HTML where you want the effect on your page.
- Add the CSS to your stylesheet (or in a <style> tag).
- Add the small JavaScript snippet before </body> — done.
Browser support
Works in every modern browser (Chrome, Firefox, Safari, Edge). Responsive, with graceful degradation.
More Distortion effects
Browse all Distortion effects →FAQ
Is the code free?
This effect is part of the Premium library (801 effects, copy-paste-ready code). Around 70 effects are free.
How do I add it to my project?
Copy the HTML, CSS and JS and paste them in. No dependencies, works with any framework.
Does it work on mobile?
Yes — the effects are responsive and degrade gracefully.