Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Tiny js code that will simulate a 3D view of your elements, like firefox used to do.

example gif


This script will get the computed background color of your body, and then will create shadows darker than your background (if you have a light background), or lighter than your background (if you have a dark background). If the body does not have a background, the script will take 160 as the default value for red, green and blue.

It will then add a border, a box-shadow, a padding and a margin to each element of your page, and will use the cool rotate3d css function to tilt your website.


Follow these steps to make it work on any website:

  1. Create a new bookmark
  2. Paste the code inside location
  3. Visit a website
  4. Click on the bookmark

Or remove the javascript: part and paste the code into your JS console.


Watch this video for a quick demo.

let bgcolor = window.getComputedStyle(document.body, null).getPropertyValue("background-color").match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i);
bgcolor = ["", "160", "160", "160"];
let darken = (bgcolor[1] + bgcolor[2] + bgcolor[3])/3 > 128;
bgcolor[1] -= darken ? 60 : -60;
bgcolor[2] -= darken ? 60 : -60;
bgcolor[3] -= darken ? 60 : -60;
bgcolor = `rgba(${bgcolor[1]},${bgcolor[2]},${bgcolor[3]}, 0.8)`;
sheet = new CSSStyleSheet()
document.adoptedStyleSheets = [sheet];
sheet.insertRule(`*{border: 1px solid ${bgcolor}; box-shadow: -3px -3px 1px 1px ${bgcolor}, -2px -2px 0 0 ${bgcolor}; padding: 5px 0 0 5px; box-sizing: border-box; margin: 3px;}`);
sheet.insertRule('body{transform: rotate3d(-1, 1, 0, 15deg); transition: transform 0.5s;}');
Copy link

cherrerajobs commented Oct 20, 2021

I minified and urlencoded it in order to make it work as a bookmarklet in Brave, works in chrome too, it was only working as a paste into the console.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment