10 free and stunning CSS tools for working with images

10 free and stunning CSS tools for working with images

Images are a very important part of any website. Using pure CSS and a few handy tools, you can easily manipulate images and create amazing effects. This article lists 10 free CSS libraries, generators, and techniques for all your website image needs.


(Cat photo by Julie Dahlgren)

CSSGram


Do you, like many, enjoy those popular Instagram filters? If the answer is yes, you’ll definitely enjoy CSSGram, a library that replicates Instagram’s filters in pure CSS.
Download & Info

HUE.css


There was a time when most websites were using a huge image as a background, which caused sites to be slow and poorly optimized. Thanks to CSS3, this whole technique is now mostly obsolete.

HUE.css is a huge pack of 49 photorealistic gradients that you can use as content backdrops in any part of your website.
Download & Info

iHover


iHover is an impressive hover effects library (20+ different effects) powered by pure CSS3. Great news, it works well with Bootstrap 3!
Download & Info

CSS Image Hover Effects


An extensive article featuring the most common CSS image hover effects, that you can simply try, copy, and paste on your own website.
Download & Info

CSSCO


Like CSSGram, CSSCO is a library featuring many beautiful filters for your images. It’s free, easy to use and the filters are particularly beautiful, so you should give it a try if you haven’t yet!
Download & Info

Center and crop thumbnails with CSS


A handy CSS centering technique to center and crop irregularly sized thumbnails within a square container. Super useful technique to learn and use in various projects.
Download & Info

Clippy


Clippy is a free online tool that lets you clip images visually, and get the CSS code to use on your projects. Over 25 shapes are available.
Download & Info

Colofilter.css


Colofilter is a small CSS library that allows you to create beautiful duotone images. A great way to unleash your creativity when designing a new site.
Download & Info

CSS Filter


A super handy tool which allows you to display a picture of your choice, play around with CSS filters and export the related code.
Download & Info

Sassy Filters


I’ve recently listed using SASS as a good practice for writing maintenable CSS. If you adopted this efficient preprocessor, Sassy Filters is for you: a set of cross-browser configurable CSS-SVG filters designed to be used with Sass.
Download & Info

Enjoyed this article? Please consider donating: 3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK