Last update: July 29, 2018

SVG Background patterns

Just a nice SVG background

The cool thing with SVG backgrounds is that you can easily change the colors, the opacity and the size.

Adding a SVG background is very easy, as it's done in CSS. Here are a couple of websites where you can find some really cool patterns for your background :



You can customize the patterns directly from their websites. Don't forget to add a background-size.

background-size:auto; for the default size,
Or background-size:50px; (or whatever) for a different size;

For a little bit of fun, you can also animate the background.

And now it's moving

#section-2-46 {
     animation-duration: 1s;
     animation-name: svgAnim;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
 @keyframes svgAnim {
     from {
         background-position: 0 0;
     to {
         background-position: 60px 60px;