Websites For Creative Backgrounds
Tags: webdev, ideas, css, frontend
Published: 2020-04-27 06:08:01

Hey, I just realized I haven't posted my list of [websites for creative backgrounds](https://wweb.dev/resources/creative-backgrounds) here on dev.to yet - so here it is:

______

##[SVG Backgrounds](https://www.svgbackgrounds.com/)
[![SVG Backgrounds](https://wweb.dev/resources/creative-backgrounds/svgbackgrounds.png)](https://www.svgbackgrounds.com/)
A list of easy customizable SVG backgrounds.


______

##[Gradient Magic](https://www.gradientmagic.com/)
[![Gradient Magic](https://wweb.dev/resources/creative-backgrounds/gradientmagic.png)](https://www.gradientmagic.com/)
A huge collection of SVG pattern backgrounds by Steve Schoger.


______

##[pattern.css](https://bansal.io/pattern-css)
[![pattern.css](https://wweb.dev/resources/creative-backgrounds/patterncss.png)](https://bansal.io/pattern-css)
A cool css library for background patterns, which can be easily applied to all elements.



______

##[Trianglify](https://trianglify.io/)
[![Trianglify](https://wweb.dev/resources/creative-backgrounds/trianglify.png)](https://trianglify.io/)
A generator for low poly triangle patterns.


______

##[Transparent Textures](https://www.transparenttextures.com/)
[![Transparent Textures](https://wweb.dev/resources/creative-backgrounds/transparent-textures.jpg)](https://www.transparenttextures.com/)
A large collection of CSS patterns, which can be filtered and colorized.


______

##[Ambient Canvas Backgrounds](https://tympanus.net/Development/AmbientCanvasBackgrounds/index2.html)
[![Ambient Canvas Backgrounds](https://wweb.dev/resources/creative-backgrounds/ambientcanvasbackgrounds.png)](https://tympanus.net/Development/AmbientCanvasBackgrounds/index2.html)
A bunch of nice backgrounds using the HTML5 Canvas API.


______

##[Hero Patterns](https://www.heropatterns.com/)
[![Hero Patterns](https://wweb.dev/resources/creative-backgrounds/heropatterns.png)](https://www.heropatterns.com/)
Repeatable SVG background patterns by Steve Schoger.


______

##[css-doodle](https://css-doodle.com/)
[![css-doodle](https://wweb.dev/resources/creative-backgrounds/css-doodle.jpg)](https://css-doodle.com/)
A web component for drawing patterns with CSS.


______

##[particles.js](https://vincentgarreau.com/particles.js/)
[![particles.js](https://wweb.dev/resources/creative-backgrounds/css3-pattern-gallery.jpg)](https://vincentgarreau.com/particles.js/)
A lightweight JavaScript library for a particles background.


______

##[Pattern Generator](https://beautifuldingbats.com/pattern-generator/)
[![Pattern Generator](https://wweb.dev/resources/creative-backgrounds/particlesjs.png)](https://beautifuldingbats.com/pattern-generator/)
A cool generator for unique, royalty-free, repeatable SVG patterns by John Bartlet.



______

##[The Pattern Library](http://thepatternlibrary.com/)
[![The Pattern Library](https://wweb.dev/resources/creative-backgrounds/pattern-library.jpg)](http://thepatternlibrary.com/)
A compiled list of beautiful patterns by different designers.


______

##[SVG Gradient Wave Generator](https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator)
[![SVG Gradient Wave Generator](https://wweb.dev/resources/creative-backgrounds/svggradientwavegenerator.png)](https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator)
A generator for SVG wave patterns.


______

##[Subtle Patterns](https://www.toptal.com/designers/subtlepatterns/)
[![Subtle Patterns](https://wweb.dev/resources/creative-backgrounds/subtle-patterns.jpg)](https://www.toptal.com/designers/subtlepatterns/)
A huge list of more than 500 subtle background patterns and textures.


______

##[THPACE!](https://www.braedin.com/Thpace/)
[![THPACE!](https://wweb.dev/resources/creative-backgrounds/thpace.jpg)](https://www.braedin.com/Thpace/)
A pretty space animation out of triangles using canvas.


______

##[Background Generator](https://background-generator.com/)
[![Background Generator](https://wweb.dev/resources/creative-backgrounds/background-generator.jpg)](https://background-generator.com/)
A cool generator, which also has a small list of backgrounds created with it.


______

##[Naker](https://app.naker.io/back/)
[![Naker](https://wweb.dev/resources/creative-backgrounds/naker.png)](https://app.naker.io/back/)
Create interactive backgrounds on this website.


______

##[Vanta.js](https://www.vantajs.com/)
[![Vanta.js](https://wweb.dev/resources/creative-backgrounds/vantajs.png)](https://www.vantajs.com/)
Animated WebGL backgrounds with the possibility to customize.


______

##[Gradient Backgrounds](https://cssgradient.io/gradient-backgrounds/)
[![Gradient Backgrounds](https://wweb.dev/resources/creative-backgrounds/cssgradient.png)](https://cssgradient.io/gradient-backgrounds/)
A website, which combines the most popular gradient collections.


______

##[GeoPattern](https://btmills.github.io/geopattern/)
[![GeoPattern](https://wweb.dev/resources/creative-backgrounds/geopattern.jpg)](https://btmills.github.io/geopattern/)
A generator for beautiful SVG patterns.


______

##[Decorative WebGL Backgrounds](https://tympanus.net/Development/DecorativeBackgrounds/index.html)
[![Decorative WebGL Backgrounds](https://wweb.dev/resources/creative-backgrounds/webglbackgrounds.png)](https://tympanus.net/Development/DecorativeBackgrounds/index.html)
A collection of shapes created using WebGL.


______

##[CSS Waves](https://csspoints.com/css-wave-effect-responsive-design/)
[![CSS Waves](https://wweb.dev/resources/creative-backgrounds/gradientwave-csspoints.png)](https://csspoints.com/css-wave-effect-responsive-design/)
A smoothly animated wave with pure CSS.


______

##[CSS Gradient Animator](https://www.gradient-animator.com/)
[![CSS Gradient Animator](https://wweb.dev/resources/creative-backgrounds/gradientanimator.png)](https://www.gradient-animator.com/)
A site to create beautiful animated gradients for use on your website.


______

##[Flat Surface Shader](http://matthew.wagerfield.com/flat-surface-shader/)
[![Flat Surface Shader](https://wweb.dev/resources/creative-backgrounds/flatsurfaceshader.jpg)](http://matthew.wagerfield.com/flat-surface-shader/)
A configurable lightning simulation using canvas or SVG polygons.


______

##[Animated Background Headers](https://tympanus.net/Development/AnimatedHeaderBackgrounds/index3.html)
[![Animated Background Headers](https://wweb.dev/resources/creative-backgrounds/animatedbackgroundheaders.png)](https://tympanus.net/Development/AnimatedHeaderBackgrounds/index3.html)
Creative website header animations using Canvas and JavaScript.


______

##[Animated CSS Background Generator](https://wweb.dev/resources/animated-css-background-generator)
[![Animated CSS Background Generator](https://wweb.dev/resources/resources01.jpg)](https://wweb.dev/resources/animated-css-background-generator)
A collection of pure css animated backgrounds with the possibility to customize.


______


Did I miss anything? Let me know in the comments :)