How to use

Learn where to place the CSS code: Demo


License summary

By obtaining and using graphics from SVGBackgrounds.com, you agree to the terms of the SVGBackgrounds.com License Agreement

  • You can use graphics in personal or commercial projects
  • You cannot use graphics in competing products
  • You must provide attribution
    • Full license

Attribution info

Hey I'm Matt, please choose your way to credit my work:

Learn about attribution

CSS Code


HTML Code

If you found this useful, please give a shoutout for Andrew's CSS trick and Matt's generator.


Recommendations, tips, and notes, when using custom SVGs

  • It is a good idea optimize your SVG code to remove unneeded code
  • Ensure your design spans the entire width and avoids getting too close to the top and bottom edges of viewBox to avoid clipping.
  • The viewBox should ideally use nice, whole numbers and a 10:1 ratio. All our designs use viewBox="0 0 1000 100".
  • The SVG element's width and height will be overridden, while preserveAspectRatio="none" ignores the viewBox's proportions.
  • Colors are removed, because black is the default color—which is ideal for masks. This includes fill, stroke, and stop-color.
  • You may use opacity, fill-opacity, and stroke-opacity. However, the container boundry may be visible if all elements have opacity.

Shape Divider Generator

It’s easy to layer a solid color SVG shape divider over your background. However, we can use background designs, photos, gradients, patterns, or textures on neighboring sections with Andrew Walpole’s CSS mask technique. Choose from 120 shape dividers (40 free), customize, then generate the CSS code.

Find SVGs Fast. Design faster.

With thousands of exclusive graphics at your fingertips, there’s nothing to slow you down.

Get All Access
Graphics:SVG Dividers
Full set:120 Dividers
Freebies:40 Dividers
Free until:Jul 2124
Published:Aug 2024
License:Free with attribution

Customize Shape Dividers

Background Type Preview

SOLID COLOR

SOLID COLOR

SOLID COLOR



Designs from SVGBackgrounds.com
Patterns from SVGBackgrounds.com
Photos from Pexels.com
Textures from TextureLoops.com



HEAD

MAIN

FOOT

Access to thousands of graphics

You must be logged in for ALL ACCESS to the complete set of 120 dividers—plus our premium library of SVG backgrounds, icons, blobs, and more.

Quickly customize unlimited graphics in unlimited projects without attribution.

Get All Access
Matt Visiwig Headshot

Hey, I'm Matt , the creator behind SVG Backgrounds. I produce free and paid resources every month, sign up for alerts.


Get freebies See latest releases