How to Create a Customized Vector Background for Your Website Within 1 Minute

October 25, 2018 ·  Yi Qian · Web Design · Everything SVG · How to Vecta

Searching high and low to get a vector background for your website? Want to get a vector wallpaper quick but don't want to be paying for stock vector graphics?

You can now create a vector background like below for yourself in less than 1 minute!

Snowflakes background in SVG
Snowflakes background in SVG
  1. Open, and create a drawing.
  2. Draw a rectangle, and fill it with the background color you want.
  3. Drop your preferred shape into the drawing, then run the plugin - Scatterer to randomly distribute the shapes around your drawing!
Scatterer plugin
Scatterer plugin
  1. Export your SVG directly, and use it for your website background image right away!
.element {
  background-image: url(snowflakes-vector.svg);

Or you can also export as PNG or JPEG and use it directly as your PowerPoint templates, for a much more professional looking presentation.

Now, you have a perfect vector image for your website background which appears crisp and sharp on any screen resolutions - from 320px to 4K screens. Lightweight, save bandwidth and most important of all, less work done!

Comment below and let us know where else do you use vector graphics? We'd love to listen from you!


Yi Qian

CXO at Electra Cloud/ Solving problems by connecting dots between brains, over a cup of coffee.

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript. BETA