I made CSS-only glitch effect

In plain words

I Made CSS-Only Glitch Effect is a web tool that creates visual glitch effects using only CSS, without requiring JavaScript. It's designed for web designers and developers who want to add distorted, fragmented visual effects to their projects. The tool demonstrates how CSS alone can produce glitchy aesthetics commonly seen in digital art and modern web design.

written from the facts on this page · September 2026

From the sources

Let me show you how I created a CSS-only image glitch effect. I was working on the robot poet and wanted my robotic bard to glitch - because it felt fitting given the quality of poetry it generates. The effect involves quite a bit of HTML and CSS but no JavaScript. I did use JavaScript to generate the HTML and CSS, but it is not used in the final version. To be clear, there's nothing wrong with using JavaScript for this kind of thing. I just saw it as a fun challenge to make a pure CSS version. We'll have to slice the image into strips and randomly displace them while altering colors at the same time. I wanted to use a single image without having to slice it manually. To achieve that, we…from muffinman.io

• 
  Glitch2017 · blog.glitch.com · ▲579

  The community where you'll build the app of your dreams

• 
  Glitch Cam2017 · apps.apple.com · ▲267

  Create glitch-effects on your photos and videos from Glitché

• 
  CSSeffectsSnippets.2019 · emilkowalski.github.io · ▲292

  A collection of CSS effects with a click to copy.

• 
  CSS generator for a high-def glass effect2025 · glass3d.dev · ▲420

  There are lots of glassmorphism generators out there, but I wanted to push the effect further! This project is the result of months of experimenting with CSS property layering and battling browser quirks. Cross-browser compatibility is actually the reason I rely on ::before and ::after pseudo-elements to build up the effect. Move the color/opacity to the main element, and you’ll get weird color bleed on the corners in Chrome. Move the texture, and it muddles the bevel’s specular highlight. Move the bevel, and it gets blurred out by the backdrop-filter. And so on! Layers include: *…

• IE
  Image Effects with CSS2016 · bennettfeely.com · ▲203
• 
  glitch-this2020 · github.com · ▲122

  Create highly customizable glitched images and GIFs!

• 
  SimCity, but with Permits▲909

  A free city-building game in your browser. You are the mayor. You know what the city needs. Now get it past the zoning board, the neighbors, the appeals court and the next election.

  Life & fun · 1d ago · permit.petercai.com

• IV
  I've been paying for a rural Tanzanian's education for 10 years▲778

  Life & fun · 14d ago · tanzaniaeducationproject.org

• 
  Bigwords.page – Turn any screen into a sign. The URL is the app▲728

  Turn a phone, tablet or TV into a sign. Type a message and it fills the screen: welcome signs, timers, Wi-Fi passwords and more. No app, no account, free.

  Life & fun · 14d ago · bigwords.page

• 
  Guitoro, a virtual guitar you strum with your keyboard▲573

  Play a free virtual guitar online with your keyboard or by touch. Slow songs down and see every chord, string and strum. Acoustic, classic, electric and bass.

  Life & fun · 8d ago · guitoro.com

• 
  See *almost* any carriers phone settings▲432

  Carrier settings from iPhone, Pixel and Galaxy firmware, decoded and compared: APNs, VoLTE, 5G and Wi-Fi Calling per carrier, and what each build changed.

  Life & fun · 12d ago · carrierexplode.com

• 
  The whole Solar System and every tracked satellite, live in the browser▲407

  Life & fun · 22d ago · space.bl2.net

• IM
  I'm an airline pilot – I built interactive graphs/globes of my flights▲1,539

  Hey HN! Pilots everywhere are required to keep a logbook of all their flying hours, aircraft, airports, and so on. Since I track everything digitally (some people still just use paper logbooks!), I put together some data visualizations and a few 3D globes to show my flying history. This globe is probably my favourite so far: https://jameshard.ing/pilot/globes/all If you’ve got ideas for other graphs or ways to show this kind of data, I’d love to hear them!

  Life & fun · 2025 · jameshard.ing

• 
  Chronicle: Cursor for Slides▲1,212

  Stunning presentations with AI. No design skills required.

  AI · 2025 · chroniclehq.com

• 
  Bubble for native mobile apps (beta)▲1,026

  Build native mobile apps for iOS and Android without code.

  Dev tools · 2025 · bble.io

• 
  Twenty▲989

  Build your Enterprise CRM with an AI-friendly SDK

  Dev tools · 2025 · twenty.com

• 
  Pally - AI Relationship Management▲949

  All your connections, across all your socials.

  AI · 2025 · pally.com

• 
  Workout.cool – Open-source fitness coaching platform▲827

  I was the main contributor to workout.lol, an open-source fitness app to easily build a workout routine. The project had traction (1.4k GitHub stars, 95 forks, ~20K visits/month), but was eventually sold due to video licensing hurdles. The new owner stopped maintaining it, and the repo went abandoned. Over the next 9 months, I sent 15 emails to try to save it : no replies. Feature requests & issues were ignored. The community was left with a "broken" tool let's say. I couldn't just let it die So I built the new version from scratch with the same open-source spirit, but a better…

  Dev tools · 2025 · github.com