More posts

Add icing to your websites using pattern.css

6 February 2021 (10 months ago)🏷️ #100daystooffload🏷️ #technology🏷️ #css

💯 100 Days to Offload

This article is one of a series of posts in the 100 Days to Offload challenge . The challenge focuses on writing frequency rather than quality, and so posts may not always be fully planned out. They are simply a way to offload thoughts.

View other articles in this series

Shapes and patterns can be leveraged in user interfaces to guide your users, draw attention to content, lend weight or emphasis, or just for aesthetics and decoration.

Layout and styling on the web is typically handled using CSS, however mastering CSS to the level where you can confidently take advantage of more advanced features is definitely not easy. I've been developing for the web almost full-time for a decade and I'm still pretty crap when it comes to doing complex stuff with CSS.

That said, some people have done some mindblowing things using CSS and just a single div element.

The Subtle Patterns website has been around for years - it's a great resource for discovering and accessing nice textures and backgrounds for your creations. There are also some nice libraries in CSS that let you describe patterns programmatically, and this comes with the added performance advantages that CSS provides (as browsers are pretty performant when it comes to CSS).

pattern.css (created by bansal-io) is a great little CSS-only library for adding simple, but effective, patterns to your websites. For example, backgrounds for elements, false "block" shadows, or even within the text itself. All that's needed are a few extra classes on your elements and the small (less than 1Kb when gzipped) library will do the rest.

To get started, you can add the library to your project using your normal JavaScript package manager (e.g. yarn add pattern.css). Then either include the CSS file in your HTML or, if you're using React or another framework/builder that allows you to import CSS directly, you can:

import 'pattern.css/dist/pattern.css'

Once that's done it's just a matter of adding classes to your markup. All the pattern.css classes start with pattern, followed by the type of pattern (e.g. -diagonal-stripes), followed by the "size" of the pattern (e.g. -sm).

For example, to build a div with a chunky zig-zag patterned background you just need to use:

<div class="pattern-zigzag-lg">

To change the colour of the pattern just set a color style on the element. If the element also has a backgroundColor then this will display through the transparent bits:

<div class="pattern-diagonal-stripes-md" style="color: red; backgroundColor: yellow">

Have a read through the documentation for examples and further pattern types. It's quick to get the hang of and far more effective to use if - like me - you find some of the complexities of CSS hard to get your head around!


This article is part of a collection of posts involved in the #100DaysToOffload series. As such it may have been written quickly and should be considered more as a thought "dump" rather than a fully-fledged essay. Thanks for reading!

📲 Enjoyed this article? Subscribe to updates!

If you would like to read more posts like this, then you can subscribe via RSS.

Subscribe to an RSS feed