CSS gradient patterns

Using the CSS3 background gradient property it is possible to make many repeatable patterns like strips or arrows. Lea Verou has created a wonderful pattern library for these. I wanted to go a bit more in depth on this subject and add a few of my own patterns too. I’ll be going through the use of the various background properties involved in creating these patterns along with some examples.

One of the easiest patterns to make is a striped background. Firstly we need to set the gradient up. CSS gradients are in fact images, so we can use the background-image property, or the standard short hand way.

.horizStripes {
    background-image: linear-gradient(to bottom, #000 0%,#000 50%,transparent 50%,transparent 100%);
    height: 1000px;
    background-size: 100% 50px;
    background-color: #fff;
}

The idea here is to get the two different colour points to stop and start at the same time, in this case 50%. You can use px instead if you like, but using percent will make our lives easier when we start changing the background size. The background-size property can restrict the height or width which can then be repeated (or not) across the page. The above CSS will create horizontal black and grey stripes. Should we want to change how thick the strips are we can just change the background-size property.

Next there is the radial gradient. A simple pattern to make is a repeating circle. We will change the background-size so its squared and then the circles will repeat across the page. With radial gradient it is better to set the beginning and end point for a color-stop/start one or two points apart, this helps with creating a smoother line, otherwise it can look rather pixelated.

.circles {
    background: radial-gradient(ellipse at center, #333333 50%,#ffffff 52%);
    background-size: 100px 100px;
    background-color: #fff;
}

Next up there is the background-position property which can be used to offset the background. Using the previous example we will create a polkadot pattern. Create two circle backgrounds. This can be done by comma separating each background. Then offset one of them by half the amount of the background size.

 .polkadot {
    background: radial-gradient(ellipse at center center , #333 44%, transparent 46%), radial-gradient(ellipse at center center , #333 44%, transparent 46%);
    background-size: 100px 100px;
    background-color: #fff;
    background-position: 0 0, -50px -50px;
}

Moving back to horizontal gradients, it is possible to slant them at an angle. By changing the beginning of the gradient code and putting in the degree of the angle desired it’s possible to have diagonal stripes. We can then layer multiple background on top of each other to make a cross hatch pattern. We will also need to add some extra colour stops into the gradient to get more stripes in order to achieve the desired effect. I have also used rgba() colours to create the stronger colour when the lines cross.

.crossHatch {
    background: linear-gradient(45deg, rgba(0,0,0,0.5) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 75%,transparent 75%), linear-gradient(-45deg, rgba(0,0,0,0.5) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 75%,transparent 75%);
    background-size: 100px 100px;
    background-color: #fff;
}

With these techniques and some clever thinking it is possible to make some rather complex patterns. To test out these techniques and give you an idea of how they can put to use together I have recreated an old Egyptian pattern. I used px to measure our this pattern, I chose to go for accuracy over scalability. When using multiple backgrounds like this, the background that is declared first, i.e. the one at the top, is highest in the layer order, they go down in descending order. So the second one wont show over the first but it will show over the third.

background: 
linear-gradient(45deg, transparent 353px, #000 353px) 0px 60px,
linear-gradient(225deg, transparent 353px, #000 353px) -28px 80px,
linear-gradient(33deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) -84px -230px,
linear-gradient(-33deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) -161px -230px,
linear-gradient(-213deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 27px 58px,
linear-gradient(213deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 162px 57px,
linear-gradient(45deg, transparent 353px, #000 353px) 54px 87px,
linear-gradient(225deg, transparent 353px, #000 353px) 27px 115px,
linear-gradient(45deg, transparent 353px, #000 353px) 163px 87px,
linear-gradient(225deg, transparent 353px, #000 353px) 136px 115px,
linear-gradient(45deg, transparent 353px, #000 353px) 109px -340px,
linear-gradient(225deg, transparent 353px, #000 353px) 81px -314px,
linear-gradient(45deg, transparent 353px, #000 353px) 109px -350px,
linear-gradient(225deg, transparent 353px, #000 353px) 81px -324px,
linear-gradient(-33deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 31px 71px,
linear-gradient(-33deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 65px 49px,
linear-gradient(33deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 154px 71px,
linear-gradient(33deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 125px 49px,
linear-gradient(33deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) -124px -205px,
linear-gradient(-33deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) -124px -205px,
linear-gradient(213deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) -14px 10px,
linear-gradient(-213deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) -14px 10px,
linear-gradient(-33deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 54px 6px,
linear-gradient(-33deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 35px 18px,
linear-gradient(33deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 160px 21px,
linear-gradient(33deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 155px 18px,
linear-gradient(33deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 148px 13px,
linear-gradient(-33deg, transparent 17px, #000 17px, #000 39px, #fff 39px, #fff 59px, transparent 59px) -122px -280px,
linear-gradient(33deg, transparent 17px, #000 17px, #000 39px, #fff 39px, #fff 59px, transparent 59px) 94px -280px,
linear-gradient(33deg, transparent 17px, #fff 17px, #fff 39px, transparent 39px) 57px -280px,
linear-gradient(-33deg, transparent 17px, #fff 17px, #fff 39px, transparent 39px) -83px -280px,
linear-gradient(33deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) 95px 54px,
linear-gradient(33deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) 115px 67px,
linear-gradient(33deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) 135px 80px,
linear-gradient(-33deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) 95px 54px,
linear-gradient(-33deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) 75px 67px,
linear-gradient(-33deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) 55px 80px,
linear-gradient(-33deg, transparent 17px, #000 17px, #000 39px, transparent 39px) -122px -230px,
linear-gradient(33deg, transparent 17px, #000 17px, #000 39px, transparent 39px) 94px -230px,
linear-gradient(-213deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) -31px -23px,
linear-gradient(213deg, transparent 17px, #fff 17px, #fff 38px, transparent 38px) 3px -24px,
linear-gradient(90deg, #fff 27px, #000 27px, #000 54px, #fff 54px, #fff 81px,#000 81px, #000 109px, #fff 109px, #fff 136px,#000 136px, #000 163px, #fff 163px, #fff 190px,#000 190px, #000 218px) 0px 0,
#000;
background-size: 218px 309px;

The final step in all of this is making it compatible for as many browsers as possible. There are about 5 different implementations for the background gradient property depending on which browser and which version is being used. The simplest way to solve this is to use a SASS @mixin, Compass has a great one already made. If you are not using SASS there is an alternative solution. Go to prefix My CSS and paste in your CSS, it will then output the CSS for the cross-browser solution. I would highly recommend the SASS way though because SASS is awesome.

It is worth noting that the strain on a browser when making gradients can be more than that of repeating a jpg across the page, it’s also possible that a jpg might have a smaller file size than 1000s of lines of CSS code. The advantage of course is that these will look great on high-definition screens, are fully responsive and don’t send any extra requests to the server. Always test these across a range of device to see how they handle the code before going live with it.

Have a play around and see what patterns you replicate or create. There are a wealth of patterns that have been created throughout the ages available for inspiration, or try making something no one has seen before. I hope you found this post useful, I hope to see some creations in the comments.

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>