CSS can’t animate gradients, but SVG can

Want to animate gradients for your website, but sad that CSS can’t help? Well it’s time to learn about SVG gradients and how to animate them. Animation preview, code, and video below.

Here’s a live preview of the Animated SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
   <defs>
      <linearGradient id='a' gradientUnits='objectBoundingBox' x1='0' y1='0' x2='1' y2='1'>
         <stop offset='0' stop-color='red'>
            <animate attributeName="stop-color"
               values="red;purple;blue;green;yellow;orange;red;" dur="20s" repeatCount="indefinite">
            </animate>
         </stop>
         <stop offset='.5' stop-color='purple'>
            <animate attributeName="stop-color"
               values="purple;blue;green;yellow;orange;red;purple;" dur="20s" repeatCount="indefinite">
            </animate>
         </stop>
         <stop offset='1' stop-color='blue'>
            <animate attributeName="stop-color"
               values="blue;green;yellow;orange;red;purple;blue;" dur="20s" repeatCount="indefinite">
            </animate>
         </stop>
         <animateTransform attributeName="gradientTransform" type="rotate" from="0 .5 .5" to="360 .5 .5"
            dur="20s" repeatCount="indefinite" />
      </linearGradient>
      <linearGradient id='b' gradientUnits='objectBoundingBox' x1='0' y1='1' x2='1' y2='1'>
         <stop offset='0' stop-color='red'>
            <animate attributeName="stop-color"
               values="red;purple;blue;green;yellow;orange;red;" dur="20s" repeatCount="indefinite">
            </animate>
         </stop>
         <stop offset='1' stop-color='purple' stop-opacity="0">
            <animate attributeName="stop-color"
               values="purple;blue;green;yellow;orange;red;purple;" dur="20s" repeatCount="indefinite">
            </animate>
         </stop>
         <animateTransform attributeName="gradientTransform" type="rotate" values="360 .5 .5;0 .5 .5" class="ignore"
            dur="10s" repeatCount="indefinite" />
      </linearGradient>
   </defs>
   <rect fill='url(#a)' width='100%' height='100%' />
   <rect fill='url(#b)' width='100%' height='100%' />
</svg>

Free SVG Generators

This article covers where you can find some of the best free SVG generators on the web. 

Skip to the list ▶

What is an SVG generator?

An SVG generator is software that creates graphics to be output in the SVG image format. Creating graphics by hand can take hours, so the clear benefit is that SVG generators can do the same work in milliseconds. 

These generators come with a simple user interface (UI), enabling you to iterate and make unique designs with the click of a button. For instance, changing the color of graphics by hand is relatively easy, but it can quickly get redundant when 20+ elements are involved. The challenge increases when you want to randomize colors or transition from one color to another in multiple steps. This logic is trivial to computers, which shred these tasks in the literal blink of an eye. 

There is a wide variety of SVG generators that can create patterns, textures, shapes, and more. Some handle a specific task like creating blobs, while other generators manipulate a huge library of graphics.

Let’s review some of our favorite free SVG generators on the web, in each category.


SVG texture website

SVG texture generator

Creating vector texture by hand is impossibly slow. This tool demonstrates just how powerful and useful SVG generators are. The SVG Textures tool creates randomized shapes and distributes hundreds of those shapes all over the page. You can control the shape, how many shapes, and how they spread. There is also a cool option to melt the neighboring blobs together. There are some more common controls to change colors, opacity, and zoom. Lastly you can export the results as a PNG or SVG.


SVG Background generator website

SVG background generator

Creating interesting backgrounds for websites is no easy task. SVGBackgrounds.com has a collection of over 200 backgrounds (48 free) that you can customize to fit your style, including abstract designs,  complex gradients, and geometric patterns. One of the powerful features is the ability to input a few colors, and the generator calculates the spectrum of the colors between, creating dazzling color blends.


Pattern generator website

SVG pattern generator

SVGs make patterns on websites mesmerizing, as they add two distinct capabilities that regular pixel patterns can’t achieve without bloating file size: large patterns and off-center patterns. With an SVG pattern generator, you can quickly scale, rotate, colorize, and output the pattern to a website or software. The Vector Pattern Generator, linked below, has a feature to display some patterns as a fill or outline. In each case you can change the stroke-width to create unique patterns.


Icon generator websites

SVG icon generators

Icons are small graphics that pack a powerful punch on websites. Traditionally, icons are distributed in packs (or files) where you manage hundreds, if not thousands, of icons. Packs make finding the right icon a difficult task, where prepping the file for your website can be a hassle. SVG generators on the other hand make searching and prepping your desired icons easy. The generator UI can help you change the color, stroke width, icon size, filter the search results, and finally copy and paste the icon right into your website or software.


Blobs.app website screenshot

SVG blob generator

Computers are great at creating randomness and generating randomized blob shapes is no exception. The blob maker app will help you create simple or complex blobs. You pick how rigid or bloated the blob is and how many points make up the blob (a number between 3-20). The SVG generator will connect and draw those points in a smooth fashion.


Shape divider website screenshot

SVG divider generator

Websites can look blocky, especially when you alternate sections with solid colors. One clever fix is to divide these sections with wavy and curly lines. Custom Shape Divider generates these interesting shapes quickly to help websites avoid the default rectangular look.


Blush website screenshot

SVG illustration generator

Customizing illustrations is tricky, and generally requires professional design software and training to do more than change colors. That’s why Blush’s SVG generator is empowering to your average designer. It intuitively allows you to quickly mix and match illustration elements to create unique characters and scenes. While Blush has a giant collection of illustration scenes and styles, the free version limits the editing and output capabilities.


SVG generators are here to stay

There are all sorts of SVG generators, and they certainly make our design tasks faster and our lives easier. SVG generators save us time by handling the redundant visual tasks that a computer can complete in under a second. In many cases, we conveniently don’t even need to fire up professional software to customize professional graphics. 

We hope you discovered some new SVG generators and bookmarked them!

3 ways SVG can help websites look less blocky

The initial state of HTML elements are rectangles. While you can give HTML containers rounded corners to break up the square design, this only helps minimally. SVGs can drastically transform blocky webpages, hiding the fact that all the building blocks are four-sided.

Here are the 3 ways SVGs can help web pages look organic

1) SVG Section dividers

When you give website sections a background color, by default the two neighboring sections are separated by a straight line. It doesn’t get much more boxy than that, unless we’re talking about a grid of evenly distributed boxes.

How to make section transitions less square:
Create a full-screen shape that will stretch from the left side of the screen all the way to the right. The shape and it’s background need to match the neighboring colors. This could be simple as matching the color of each section, but can work with a solid color over a photograph.

Purple wave divider
Layering results: SVG (top) over the photograph (bottom)

How to implement an SVG divider

To achieve this effect with CSS, we can give two images to a single background-image property. The first will be the SVG positioned to the top with a 100% width. The second with be the photo with a background-size: cover to fill the entire section.

Here is a demonstration of a divider paired with a photograph. The SVG overlaps the top of the photo and matches the color of the section directly above.
.section-divider{
   background-image: url(<svg code>), url(/img.jpg);
   background-position: top center, 50%;
   background-size: 100%, cover;
   background-repeat: no-repeat;
}

Notice when two arguments are used for the background-image, you can give other background-image properties one value to affect both images or give two values to affect both in different ways.

2) SVG backgrounds with angles or curves

Solid color backgrounds or repeating geometric patterns can emphasize how a web page is rectangular. Therefore, if we reach for designs that don’t line up with the screen, the boxy design isn’t as apparent. Curves work hardest to pull your eyes away from the square nature of the screen.

How to make backgrounds less square:
Choose backgrounds with curves or angles that contrast from the straight lines of the content, screen, or containers. Here are a few quick example backgrounds I pulled from SVGBackgrounds.com:

3 laptops demonstrating curvy backgrounds

You can also use radial gradients or angled linear gradients to bring attention to various parts of the screen. If you overlap multiple gradients, you can mimic mesh gradients, which are not currently compatible with SVG at this time.

Three laptops demonstrating gradient backgrounds
Websites with linear and mesh gradients

Lastly, if you select a repeating pattern, you can rotate them slightly, so everything doesn’t line up with the screen perfectly. You can additionally scale the SVG pattern large to deemphasize the symmetrical nature of patterns. You can get free SVG patterns with this Vector Pattern Generator.

A laptop demonstrating a large pattern
A large pattern website background

3) SVG blobs, illustrations, and other shapes

Web design is built on the CSS box model, which naturally causes default content to be constrained by rectangular design. There is no need to escape the containers to achieve a less-blocky design. The trick is to keep the container’s background transparent, bringing the focus to the content’s irregular, curvy shapes.

How to make page elements less square:
Shapes and blobs can help de-emphasis the container, especially when the background image is transparent. There are three obvious elements that can pull off this tactic.

SVG blobs
Using blobs in one way or another has become a popular trend in web design. One way to use blobs is to place content right over it, making the blob like an organic container. Another way is placing blobs of various sizes in the background, which tends to hide straight lines and boxy containers.

SVG illustrations
Illustrations are naturally full of organic edges and shapes that break the rectangular mold. Images of illustrations are generally contained within a rectangular canvas, so you must ensure there is no background color to avoid the canvas from being noticeable. A great resource to find SVG illustrations is unDraw

SVG shapes and icons
Using icons or shapes on your web pages can grab the users’ eyes, placing emphasis on elements that don’t use boxy design. I already wrote an entire article on where to get great SVG icons (and shapes). SVG icons and shapes are often aligned to content, but I’ve also seen them used as background elements, to lessen the uniformity that results from four-sided design.

Thinking outside the blocks

While everything you design for webpages starts with rectangular containers, you don’t need to settle with blocky design. Instead reach for SVGs to think outside of the box. You can always rely on section dividers, backgrounds, or shapes. Don’t be square!

The fastest icons in the Wild Wild Web

In this article, I’m going to show you the fastest way to integrate icons into your web projects. Hint, it’s literally click and paste.

But let me disappoint you first. You’re not going to find the fastest resources with a quick google search. In fact, when you look for icons to use on your website, a search will bring you to some well known sites and icon sets:

  • The Noun Project
  • FlatIcon
  • Icons8
  • Icon Finder
  • Freepik
  • FontAwesome

BUT, they come with barriers that we intend to avoid.

What do we want?
The SVG code!

When do we want it?
Instantly!

6 rules for faster icons

Not all icon collections are built the same. Some icon collections are large and some are small. Some are built as PNGs, SVGs, icon fonts, icon sprites, or left in a design file like Adobe Illustrator. But for your icons to travel at the speed of light, they have to adhere to a few rules. 6 very specific rules.

Let me spell out what we are looking for:

  1. SVG icons and not JPG/PNG, ZIPs, Fonts, or design files
    • No software required to customize SVG (color with CSS)
    • Files create extra steps
  2. No arbitrary barriers, like registration
    • Barriers slow you down, but we have a need for speed
  3. No cost or attribution required
    • Paywalls are a barrier, attribution adds another step
  4. A search mechanism to quickly find relevant icons
    • Looking at a grid of a thousand icons is slow
  5. A sizeable icon set with consistent design
    • If the icons don’t match in style, they’ll look bad together
  6. A way to click and paste code
    • Pasting code into HTML is fast and easy

Before I get to the list of good sites, I must stress I’m going to be strict. If you fail to meet one of those bullet points, you’re off the list.

For instance, Google Fonts has an impressive free icon tool. There is a huge collection of searchable SVG icons, no registration required, but it fails. It fails because there is no simple way to copy-and-paste the SVG code. You can download the icon as an SVG or add the icons as a font, but neither of these methods meet the criteria for being lightning quick.

I researched far and wide to curate this list of qualifying icon websites. I had to visit hundreds of websites, click around, test icons, read licenses, type in searches, and test the output. When you click a button: some sites copy the code, some open a modal, and some proceed to download a file. I unwittingly downloaded hundreds of icon files testing out websites to see what method they used by default. But I did this all for you.

Let’s get right to the list, then I’ll break down the steps to add an icon to your next project.

18 lightning fast SVG icon sites:

How to place your icons into your web project quickly

Now that you know WHERE to find good icons for your website or web-based app, it’s time to delve into the secret world of icon placement. The process is as easy as 1-2-3.

  1. Pick your icon
  2. Paste your icon
  3. Style your icon

Let’s look at each step.

Step 1: Pick and copy your icon

Up to this point, you have been preparing for this very moment. After visiting an icon site from the list above, you can search for the icon you need. In my case, I searched for a “crown” icon.

Then click to copy the icon SVG code.

The sites I provided are generally intuitive, but it may take a few seconds to locate the correct copy button on your first visit. Most sites have a copy mechanism that uses some variation of a “Copy SVG code” button, or clicking the icon directly, or even clicking a blob of SVG code.

Demonstration of how to use Phosphor Icons website Screenshot
Finding a heart in the icon search, and saving the SVG code to the clipboard

Now that you have the SVG code in your clipboard, you’re ready to proceed.

Step 2: Paste your icon

This SVG code you are about to paste is powerful. Do you think I’m being silly or exaggerating? No, I’m serious. To the untrained eye, it looks like a blob of code. But you can paste this directly into software like Illustrator or Figma. That’s powerful, but for today you’re right: it’s just a blob of code. 

Where to paste: We need to paste this into HTML. The great thing is that any tool you use to build your website likely outputs everything to HTML. Writing in PHP or JS? You’ll output to HTML. Are you using a page builder like Webflow or Elementor? You’ll output to HTML. Writing a blog post on WordPress, use an HTML element to—you guessed it—output to HTML!

Type CTRL+V or Command+V to paste the code in the desired place. 

Bonus: to optimize the SVG code blob before you paste, I often use SVG OMG. It can shed 10-30% of the unnecessary code. You can also use it to inline the styles or deal with whitespace. We’ll talk about SVG optimization further another day.

Step 3: Style your icon

The code blob is SVG code. And if you stare at it long enough, it’s almost readable. 

Screen grab of scene from the movie Matrix: looking at code
I don’t even see the code, all I see is circle, rect, stroke…

When you know what attributes you are looking for, it makes it easy to edit. Let’s spell out the two most important ones: color and size. Some of the icon sites have a color/size editor like Tabler Icons, Phosphor Icons, and the one I made (Visiwig.com) if you would rather not mess with the code.

Changing the color:
The two attributes that affect the icon color are fill and stroke. Generally speaking, if the icons are solid, you’ll want to change the fill color. If the icon is outlined, you’ll want to change the stroke color and set the fill to none (fill=”none”). You can use color names like “red” or input hex codes like #F00.

<!-- Red fill (fill="#F00") -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" width="40" height="40">
  <path fill="#F00" d="M9.293 1.55l.707.708.707-.707a5 5 0 117.071 7.071l-7.07 7.071a1 1 0 01-1.415 0L2.222 8.622a5 5 0 117.07-7.071z"/>
</svg>

<!-- Purple outline (stroke="#808" fill="none") -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" width="40" height="40">
  <path stroke="#808" fill="none" d="M9.293 1.55l.707.708.707-.707a5 5 0 117.071 7.071l-7.07 7.071a1 1 0 01-1.415 0L2.222 8.622a5 5 0 117.07-7.071z"/>
</svg>
The output:

You could also control the color via CSS if you prefer, like so:

<!-- Change via CSS (class="icon") -->
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" width="40" height="40">
  <path d="M9.293 1.55l.707.708.707-.707a5 5 0 117.071 7.071l-7.07 7.071a1 1 0 01-1.415 0L2.222 8.622a5 5 0 117.07-7.071z"/>
</svg>

<style>
   .icon{
      fill: blue;
      stroke: black;
   }
</style>
The output:

If you desire to change the background color, you’ll want target the SVG or icon container with a background color:

<!-- Change the background color inline -->
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" width="40" height="40" style="background-color:yellow;">
  <path d="M9.293 1.55l.707.708.707-.707a5 5 0 117.071 7.071l-7.07 7.071a1 1 0 01-1.415 0L2.222 8.622a5 5 0 117.07-7.071z"/>
</svg>

<!-- Change background color with CSS -->
<style>
   .icon{
      background-color: yellow;
   }
</style>
The output:

Editing the size:
There are a few factors that affect the icon size: width and height of the SVG or container, as well as the stroke-width for outlined icons.

On the above color demo’s the size was always 40px (the unit is implied). Let’s change that with both the inline method and via CSS and see what we get:

<!-- Change the background color inline -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" width="60" height="60">
  <path d="M9.293 1.55l.707.708.707-.707a5 5 0 117.071 7.071l-7.07 7.071a1 1 0 01-1.415 0L2.222 8.622a5 5 0 117.07-7.071z"/>
</svg>

<!-- Change background color with CSS -->
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" >
  <path d="M9.293 1.55l.707.708.707-.707a5 5 0 117.071 7.071l-7.07 7.071a1 1 0 01-1.415 0L2.222 8.622a5 5 0 117.07-7.071z"/>
</svg>

<style>
   .icon{
      width: 100px;
      height: 100px;
      fill: red;
   }
</style>
The output:

Wrapping up the project

We went over the basics to quickly find a suitable icon and get it into our web project in a flash. After you go through the process a few times, you’ll discover how truly fast you can add a nice touch to your design. All it takes is a quick search, a click and paste, and a little customization to get it just right.

Lastly, while no attribution is required, it doesn’t hurt to show your love and support by sharing them on social media or crediting the authors somewhere.

Matt Visiwig Headshot

Hey, I'm , the creator behind SVG Backgrounds. Hire me to help you with design on your website or app.

Hire me