Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <label><input id="toggleFilter" type="checkbox">Toggle Filter</label>
<div>Random fixed element</div>
<h1>Give attitude fall asleep upside-down tuxedo cats always looking dapper</h1>
<h2>And sometimes switches in french and say “miaou” just because well why not morning beauty routine of licking self</h2>
<p>Scratch me there, elevator butt milk the cow. Purrr purr littel cat, little cat purr purr love and coo around boyfriend who purrs and makes the perfect moonlight eyes so i can purr and swat the glittery gleaming yarn to him (the yarn is from a $125 sweater) oooo! dangly balls! jump swat swing flies so sweetly to the floor crash move on wash belly nap my left donut is missing, as is my right. Cats are fats i like to pets them they like to meow back paw your face to wake you up in the morning plays league of legends yet purr while eating chill on the couch table. Meow all night having their mate disturbing sleeping humans meow for food, then when human fills food dish, take a few bites of food and continue meowing cat mojo claw drapes dismember a mouse and then regurgitate parts of it on the family room floor. Fall asleep on the washing machine lay on arms while you’re using the keyboard. Chew master’s slippers i do no work yet get food, shelter, and lots of stuff just like man who lives with us. Pose purrfectly to show my beauty chew master’s slippers. Curl into a furry donut claws in the eye of the beholder so ask to go outside and ask to come inside and ask to go outside and ask to come inside hiss and stare at nothing then run suddenly away, kitty poochy chase laser for fooled again thinking the dog likes me.</p>
<p>Immediately regret falling into bathtub hiiiiiiiiii feed me now fat baby cat best buddy little guy pee in human’s bed until he cleans the litter box. Need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me ears back wide eyed or experiences short bursts of poo-phoria after going to the loo yet a nice warm laptop for me to sit on but i can haz. Meow meeeeouw. No, you can’t close the door, i haven’t decided whether or not i wanna go out with tail in the air so grab pompom in mouth and put in water dish, hell is other people chase ball of string eat fish on floor. Jump on human and sleep on her all night long be long in the bed, purr in the morning and then give a bite to every human around for not waking up request food, purr loud scratch the walls, the floor, the windows, the humans hack up furballs attack the child push your water glass on the floor and woops poop hanging from butt must get rid run run around house drag poop on floor maybe it comes off woops left brown marks on floor human slave clean lick butt now scream for no reason at 4 am. The fat cat sat on the mat bat away with paws destroy house in 5 seconds or a nice warm laptop for me to sit on favor packaging over toy purr like a car engine oh yes, there is my human slave woman she does best pats ever that all i like about her hiss meow chew on cable. Annoy kitten brother with poking sit by the fire while happily ignoring when being called eat the rubberband, but meowing chowing and wowing so behind the couch, or stand with legs in litter box, but poop outside. Yowling nonstop the whole night. Make plans to dominate world and then take a nap. Bite off human’s toes floof tum, tickle bum, jellybean footies curly toes or jump around on couch, meow constantly until given food, have my breakfast spaghetti yarn meow. Eat and than sleep on your face eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap small kitty warm kitty little balls of fur. Spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce ask for petting. Asdflkjaertvlkjasntvkjn (sits on keyboard) i’m bored inside, let me out i’m lonely outside, let me in i can’t make up my mind whether to go in or out, guess i’ll just stand partway in and partway out, contemplating the universe for half an hour how dare you nudge me with your foot?!?! leap into the air in greatest offense!. Eat the fat cats food fart in owners food find empty spot in cupboard and sleep all day. Scratch leg; meow for can opener to feed me.</p>
              
            
!

CSS

              
                :root {
  --filter-value: none;
}

html {
  // Workaround for Firefox issue 1165767: CSS filters don't apply to background of <body> and <html> when propagated to canvas (https://bugzilla.mozilla.org/show_bug.cgi?id=1165767) and Chromium Issue 591015: -webkit-filter doesn't change body background color unless `background` is specified in `html`(https://bugs.chromium.org/p/chromium/issues/detail?id=591015) which apparently is fixed but clearly is not
  background-color: rgba(255, 255, 255, 0.1);
}

body {
  margin: 0;
  padding: 1em;
  background-color: limegreen;
  filter: var(--filter-value);
}

label {
  font-size: larger;
  cursor: pointer;
}

div {
  background-color: indigo;
  color: white;
  position: fixed;
  left: 1em;
  bottom: 1em;
  padding: 1em;
  border-radius: 1em;
}
              
            
!

JS

              
                document.getElementById('toggleFilter').addEventListener('click', evt => {
  if (evt.target.checked) {
    document.documentElement.style.setProperty('--filter-value', 'grayscale(1)');
  } else {
    document.documentElement.style.setProperty('--filter-value', 'none');
  }
}, false)
              
            
!
999px

Console