---
title: "Grayscale Image When User Offline"
description: "You must have noticed, webapps images in chrome going grayscale to indicate that the network is down, a simple demonstration."
url: "https://h3manth.com/scribe/grayscale-image-when-user-offline/"
canonical_url: "https://h3manth.com/scribe/grayscale-image-when-user-offline/"
markdown_url: "https://h3manth.com/scribe/blog/grayscale-image-when-user-offline.md"
publishDate: "2013-01-07T00:00:00.000Z"
author: "Hemanth HM"
category: "javascript"
tags: ["javascript","web"]
word_count: 169
reading_time_minutes: 1
x_markdown_tokens: 438
content_signal: "ai-train=yes, search=yes, ai-input=yes"
---

# Grayscale Image When User Offline

> You must have noticed, webapps images in chrome going grayscale to indicate that the network is down, a simple demonstration.

You must have noticed, webapps images in chrome going grayscale to indicate that the network is down, a simple demonstration of the same is been done here.

The trick is with very simple HTML5 event and CSS3 trick, sometime back had blogged about [HTML5+JS offline/online notification ](http://www.h3manth.com/content/html5js-offlineonline-notification)on the same lines have done some silly code to emulate the offline gray-scaling of images, checkout the [demo](http://www.h3manth.com/demo/gray.html) .

**Here is the code :**

```css
/* CSS grayscale */
-webkit-filter: grayscale(100%); /* Latest webkit */
-moz-filter: grayscale(100%); /* Mozilla */
-ms-filter: grayscale(100%); /* M$ */
-webkit-filter: grayscale(1); /* Old webkit */
filter: grayscale(100%); /* Current API */
```

```javascript
// Javascript to change the class 
window.addEventListener('offline', function (evt) { 
  console.log("offline"); 
  document.getElementById('test').className = "offline"; 
}); 

window.addEventListener('online', function (evt) { 
  document.getElementById('test').className = ""; 
});
```

Can also use `document.getElementById('id').classList.toggle('class');` to toggle classes :)

**Update 1:**

There were few comments in reddit saying this is not working on FF, the fix is as below :

```css
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */
filter: grayscale(100%);
```