How to use repeatable SVG background patterns

February 14, 2020

Instead of using images in backgrounds, why not try SVG repeated backgrounds?

Speed up version 22.1 MB size, watch part 4 on Youtube full version

Benefits

  • Smaller file size than images, so will load quicker
  • Not too distracting from the content
  • Can make the background a bit more interesting or an alternative style to solid background colors or gradient backgrounds

Other ways to separate sections

  • Solid color backgrounds
  • Subtle gradient backgrounds
  • Images

One resource I recommend is: https://www.heropatterns.com/ Which has some nice patterns, depending on the theme of your site, I decided to choose the death star background.

The foreground color, which is the pattern, and the background color are not too contrasting and won’t distract from the main content

I have also used gradients as backgrounds and go for ones that are close together on the colour wheel so again it’s not a huge contrast. So from orange to red. https://uigradients.com/

🤩

Learn → Make → Inspire