Five Tools To Make Quick Backgrounds

I’m organizing my bookmarks, and realizing I have a lot of good tools I should share around. This is a list of five tools to make quick backgrounds I use quite often in CSS development that save me a lot of time. I find myself in a situation where I am often building templates for one-time uses and need to add a little bit of variety instance to instance, so need tools to help get that job done quickly. All of these have been indispensable in achieving that objective. They help me feel like I am not re-inventing the wheel every few days.

CSS3 Gradient Generator

A fairly simple, but efficient, CSS3 gradient generator for backgrounds and textures. Has a lot of really good templates to start from.

Ultimate CSS Gradient Generator

CSS3 Gradient Generator

Similar to the previous generator but with a different UI. I find each one useful for different situations. This one seems to be better if I need something fast, unless I want to just pick a template.

BgPatterns

BgPatterns

A quick tool for building nice background textures using pre-selected PNGs. Also has a good gradient generator, though not as dynamic as the previous two.

Patternify

Patternify

Patternify is good for making background overlays to add some depth and additional texture to your backgrounds. It is an actually designer more so than just a generator and is quite powerful.

Subtle Patterns

Subtle Patterns

Subtle Patterns is more of a library than a generator but I include it because, well, I use it more than I do all the tools above. It has a really solid preview function and an extremely vast array of patterns that are, well… subtle! And the subtle diversity is what makes the patterns shine, they’re all distinct but provide nice ambient texturing.

About the author

Daniel Tuttle
By Daniel Tuttle

Follow Me

"We Are the Dreamers" by The Stargazer Lilies - ift.tt/2vya7Rs #np

About 16 hours ago from Daniel Tuttle's Twitter via Buffer

Instagram Feed

Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.