Helpful CSS resources

A long list of helpful CSS resources. Dig in and enjoy! Let me know of other CSS resources I should add or when I need to edit the list.

CSS Reference – list of all CSS properties.
A list of 300+ CSS properties
Learn CSS Layout
CSS Tutorial at


Colors: material ui – colors and Adobe – Color Wheel and – color schemes generator. – Color models. – Color tools. – Load random colors and gradients. – Gradients.
Colorzilla – Gradient Editor
gradienty – Using color schemes. – Color Meaning, Symbolism, And Psychology: What Do Different Colors Mean. (Load random colors and gradients. Get inspired and download the CSS.)
Colorzilla – Gradient Editor
gradienty – A very interesting way to add a gradient – browse a CSS gradient list

CSSmatic – Border radius
CSS3gen – Box Shadow
cssbuttons – css properties to control web typography

Paulund – Typing effect
h5bp github – Effeckt.css

codepen – Progress bar
codepen – Tool tips

.webdesignerhut – pure-css-modal-window-effect

Border Radius, box shadow and buttons. (Gradients, Border Radius, Noise texture and Box Shadow.)


Image effects and image hover effects

Hover over buttons and create an icon effect:

Transitions & animations
Upgrading CSS Animation With Motion Curves – smashingmagazine.
Using Transitions to create an animated effect.

Picks up colors from web sites with stylifyme.

CSS Layerstyles
CSS 3 Generator

CSS Values
CSS Desk
CSS Lint


pattern.css – CSS only library to fill your empty background.


CSS multi level accordion menu
jonsuh: hamburgers
freefrontend: css-menu


Material design and style guides:
designyourway – material design resources for designers

Plugins: CSS Hero Microthemer

Long lists of great resources to go through:

designyourway – the most popular css libraries that are on github
Simplilearn – css3 resources ultimate list article
22 Essential CSS Recipes

Additional resources:

CSS Cheat sheet
10 fixed CSS backgrounds.


Leave a Reply

Your email address will not be published. Required fields are marked *