# web gradients **a collection of places to find web gradients for use on your websites** [colorful gradients have become quite a popular trend](https://designmodo.com/gradients/). [here are some great website examples](https://designmodo.com/websites-gradients/). [here is another great set of examples](https://designshack.net/articles/trends/gradients/). personally, i absolutely love this trend and hope that it continues for a long time. gradients are a simple and effective way to add splashes of color and personality to a website. plus, since they are usually only a few lines of css code, load times are usually much quicker than using images. [the w3schools site has a solid introduction on how to build gradients in css.](https://www.w3schools.com/css/css3_gradients.asp) since gradients have become such a trend, it makes sense that there would be plenty of tools and libraries out there to help designers with their work. here are a number of places that i've found for you to use… ## gradient libraries - [gradient hunt](https://gradienthunt.com/) - [itmeo web gradients](https://webgradients.com/) - [cool hue](https://webkul.github.io/coolhue/) - [colorful gradients](https://colorfulgradients.tumblr.com/) - [css gears](https://gradients.cssgears.com/) - [digital synopsis list of gradients](https://digitalsynopsis.com/design/beautiful-color-ui-gradients-backgrounds/) - [design gradients](https://www.designgradients.com/) - [css gradients from baseline](https://baseline.is/tools/css-gradients/) - [gradienty.xyz](https://gradienty.xyz/) - [css pro](https://csspro.com/css-gradients) ## interactive gradient tools - [gradient style](https://gradient.style/)- powerful tool using some of the newer color spaces - [css gradient](https://cssgradient.io/) - simple interactive slider with intuitive controls - [draggradients](https://elrumordelaluz.github.io/draGGradients/#) - get gradients that are more complex than simple linear transitions - [mesher](https://csshero.org/mesher/) - complex generator - [ccbg](https://www.ccbg.io/generator) - another tool to get more complex layered gradients - [gradient background generator](http://gradientcreator.com/#) - yet another tool to get complex layered gradients - [baseline.is](https://baseline.is/tools/css-gradients/) - plenty of starter gradients that can be quickly edited with sliders - [ui gradients](https://uigradients.com/#Sunkist) - some controls with plenty of built-in presets - [gradient lab](https://gradientlab.space/) - good controls, with powerful color pickers - [grad pad](http://ourownthing.co.uk/gradpad.html) - nice simple tools and built-in library - [w3schools](https://www.w3schools.com/colors/colors_gradient.asp) - simple and effective generator - [colorspace two color gradient](https://mycolor.space/gradient) - beautiful interface for creating two color gradients - [colorspace three color gradient](https://mycolor.space/gradient3) - beautiful interface for creating three color gradients - [color morph](https://www.color-morph.com/) - set the number of colors and let it randomize options. download as css or svg ## other random tools - [free mesh gradients](https://lstore.graphics/meshgradients/) - image-based gradients - [gradient magic](https://www.gradientmagic.com/) - stylized gradients perfect for backgrounds. some really good patterns and styles here - [transitioning gradients in css](https://codepen.io/keithjgrant/pen/OgEdgN) - codepen with a technique to transition a gradient on hover --- tags: #web #resources #gradients home: [[! intro to web resources]]