How to make backgrounds like the default WhatsApp wallpaper?

davinaleong profile image Davina Leong ・1 min read

Hi designers,

What is the technique to create "fine-print" backgrounds like the default WhatsApp wallpaper? I also need it to be responsive and the shapes to be distinguishable at different resolutions. I presume this is achieved through vector graphics like .svg?

WhatsApp background

Also, how to I make "code-text" backgrounds? Can't find a reference image for this so I'll try my best to explain what I'm trying to achieve. I want a background that's basically a chuck of code with muted colours. While the background-text is distinguishable, it shouldn't clash with the foreground content.

Any tips and tricks on techniques on how to achieve this?
Or at least links to such resources?

I'm trying to create backgrounds like this for a website I'm making. The theme of the website is centred around web development and programming.


Posted on by:

davinaleong profile

Davina Leong


PHP/JS web dev who loves food, video & board games and socializing.


markdown guide

You can use Photoshop, Sketch, etc. to make those. Just need to make sure they can be tiled, or seamless. Same with code, you have to match the font-color very closely to the background, so it's really subtle.
toptal.com/designers/subtlepatterns/ has tons of those.


Whoo, Subtle patterns, cool resource!

As for tools, I use Affinity Designer on Windows... don't want to pay subscription fees... 😛


What you probably want is a svg pattern. Here are some places where you can find them:



Well, it's nice. I have a collection of the best WhatsApp background images. Make sure to check this out coremafia.com/whatsapp-wallpapers/


Take a solid color and add noise until you like it.


A good tool to create that is Illustrator. You just need to see a good Pattern Backgrounds tutorial.