38 Websites you can use for cool backgrounds
Tags: webdev, css, resources
Published: 2023-08-21 10:18:03

Hey everyone, I'm collecting resources over at [WebDev Town](https://webdev.town). Here is a summary of all the websites I've found that you can use to get creative backgrounds for your website.


Let me know if you know a website I've missed :)



*[Ambient Canvas Backgrounds](https://tympanus.net/Development/AmbientCanvasBackgrounds/index2.html)*
A set of animated ambient canvas backgrounds with different effects.


*[Animated Background Headers](https://tympanus.net/Development/AnimatedHeaderBackgrounds/index.html)*
Creative website header animations using Canvas and JavaScript.


*[Animated Backgrounds](https://animatedbackgrounds.me/)*
A collection of 30+ animated backgrounds for websites and blogs.


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


*[Cool Backgrounds](https://coolbackgrounds.io/)*
A beautifully curated selection of cool, customizable backgrounds.


*[CSS Background Patterns](https://www.magicpattern.design/tools/css-backgrounds/)*
A bunch of cool pure CSS background patterns.


*[CSS backgrounds](https://superdesigner.co/tools/css-backgrounds)*
A nice collection of 100+ free CSS patterns.


*[CSS Gradient Animator](https://www.gradient-animator.com/)*
A website to generate an animated gradient background.


*[CSS Gradient Editor](https://www.cssgradienteditor.com/)*
A tool for creating colorful CSS gradient backgrounds and patterns.


*[CSS Pattern](https://css-pattern.com/)*
A nice collection of background patterns made with CSS gradients.


*[CSS Plasma Background Generator](https://fracergu.github.io/css-plasma-background-generator/)*
A simple tool written in vanilla JavaScript to generate a plasma background for your website.


*[CSS3 Patterns Gallery](https://projects.verou.me/css3patterns/)*
A gallery of CSS patterns, which are also editable right in the browser.


*[Decorative WebGL Backgrounds](https://tympanus.net/Development/DecorativeBackgrounds/index.html)*
A collection of decorative animated background shapes powered by WebGL and TweenMax.


*[Flat Surface Shader](http://matthew.wagerfield.com/flat-surface-shader/)*
A simple, lightweight Flat Surface Shader for rendering lit triangles.


*[GeoPattern](https://btmills.github.io/geopattern/)*
A generator for beautiful SVG patterns.


*[Gradient Backgrounds](https://cssgradient.io/gradient-backgrounds/)*
A website, which combines the most popular gradient collections.


*[Gradient Magic](https://www.gradientmagic.com/)*
A huge collection of beautiful CSS gradients.


*[Gradienty](https://gradienty.codes/)*
A tool to generate tailwind gradients for your backgrounds, texts & shadows.


*[Hero Patterns](https://www.heropatterns.com)*
A cool collection of repeatable SVG pattern backgrounds by Steve Schoger.


*[midory](https://aeroheim.github.io/midori/)*
A cool library for animated image backgrounds.


*[Naker Back](http://back.naker.io/)*
A website to create cool interactive backgrounds.


*[particles.js](https://vincentgarreau.com/particles.js/)*
A lightweight JavaScript library for creating particles.


*[Pattern Generator](https://doodad.dev/pattern-generator/)*
A generator for seamless, unique, royalty-free patterns, which are exportable as SVG, JPEG, or PNG.


*[Pattern Library](http://thepatternlibrary.com/)*
A compiled list of beautiful patterns by different designers.


*[Pattern Monster](https://pattern.monster/)*
An online pattern generator to create repeatable SVG patterns.


*[pattern.css](https://bansal.io/pattern-css)*
A CSS only library to fill your empty background with beautiful patterns.


*[pocoloco](https://pocoloco.io/)*
A generator for different dynamic backgrounds.


*[Subtle Patterns](https://www.toptal.com/designers/subtlepatterns/)*
A huge list of more than 500 subtle background patterns and textures.


*[SVG Backgrounds](https://www.svgbackgrounds.com/)*
A collection of customizable SVG-based repeating patterns and backgrounds.


*[SVG Gradient Wave Generator](https://www.outpan.com/app/9aaaf27303/svg-gradient-wave-generator)*
Generate SVG waves using gradients, randomness, and other parameters.


*[THPACE!](https://www.braedin.com/Thpace/)*
A pretty space animation out of triangles using canvas.


*[Transparent Textures](https://www.transparenttextures.com/)*
A large collection of CSS patterns, which can be filtered and colorized.


*[Triangle Pattern Maker](https://msurguy.github.io/triangles/)*
A cool generator for triangle patterns with light effects.


*[Trianglify.io](https://trianglify.io/)*
Create colorful low poly triangle patterns that can be used as wallpapers and website assets.


*[Vanta.js](https://www.vantajs.com/)*
A gallery of customizable animated 3D & WebGL backgrounds using three.js.


*[Wave](https://loading.io/background/m-wave/)*
A generator for smooth gradient waves in multiple layers, that flowing slowly.


*[Wicked Backgrounds](https://wickedbackgrounds.com)*
A generator to create beautiful SVG backgrounds for your UI designs. 


*[Your Lucky CSS Pattern](https://random.css-pattern.com/)*
Get a nice random background from a collection of more than 100 CSS patterns.