Skip to content

Instantly share code, notes, and snippets.

@tombennet

tombennet/preserve-pixelation.scss

Last active February 6, 2022 00:06
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tombennet/12ea6362586b635c556a to your computer and use it in GitHub Desktop.
Save tombennet/12ea6362586b635c556a to your computer and use it in GitHub Desktop.
Download ZIP
Preserve pixelation when scaling pixel art with CSS - https://builtvisible.com/image-scaling-in-css/
Raw
preserve-pixelation.scss
@mixin pixelated {
-ms-interpolation-mode: nearest-neighbor; // IE 7+ (non-standard property)
image-rendering: -webkit-crisp-edges; // Safari 6 - 9
image-rendering: -moz-crisp-edges; // Firefox 3.6 - 64
image-rendering: crisp-edges; // Firefox 65+
image-rendering: pixelated; // Chrome 41+, Edge 76+, Safari 10+
}
Copy link

ghost commented Mar 29, 2016 •
edited by ghost

Very useful in the custom CSS field of the Imagus Viewhance browser extension.

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