SubtlePatterns Bookmarklet

Subtle­Patterns on your website


Preview hundreds of great patterns from SubtlePatterns.com directly on your website

SubtlePatterns Bookmarklet Drag this to your bookmarks toolbar to preview backgrounds on any website

What is this? Why is it useful?

Finding a good background pattern for your website can be a pain. Fortunately, SubtlePatterns offers hundreds of great patterns you can use on your website for free.

This bookmarklet lets you preview all those background patterns directly on your website very quickly. This makes selecting a background for your website even easier!


What's a bookmarklet?

A bookmarklet is a special kind of bookmark that can perform a special ability. In this case it opens a small widget (like the one above) that lets you change the current website's background.


Can I change where the pattern is applied?

Yes, by default the background pattern is applied to the <body> element. You can use the Background Selector tool to change this (access this tool via the settings popup or by pressing the "s" key on your keyboard).


Can I use this on the iPad?

Yes (with some exceptions). Copy and paste the code below into one of your bookmarks.

javascript:(function()%7Bvar%20newscript%3Ddocument.createElement(%27script%27)%3Bnewscript.type%3D%27text/javascript%27%3Bnewscript.async%3Dtrue%3Bnewscript.src%3D%27https://bradjasper.com/subtle-patterns-bookmarklet/static/js/all.js%3Fcb%3D%27%20%2B%20Math.random()%3B(document.getElementsByTagName(%27head%27)%5B0%5D%7C%7Cdocument.getElementsByTagName(%27body%27)%5B0%5D).appendChild(newscript)%3B%7D)()%3B

Visit iOS Bookmarklets for more info.


Can I use keyboard shortcuts?

Yes you can! Type a question mark (shift + /) to open the keyboard shortcuts dialog. For starters, you can use your left and right arrow keys to navigate between patterns (and you can try it right now on this page).


Is there a Chrome Extension available?

Yes there is, Noam Eppel created the Subtle Patterns Chrome Extension which uses the bookmarklet.


How can I receive updates?

The bookmarklet is built so that you're always running the latest version. This means you only have to install it once and it will automatically update itself.

For news on what's happening, follow me on Twitter at @bradjasper

Fork me on GitHub