This post was originally posted on CodePen on May 31, 2019

My Favorite CSS Guides, Cheatsheets and Tools

Tags that this post has been filed under.

At the completion of each pen, I would close like... 25 Chrome tabs 😄

They are usually StackOverflow tabs for very specific questions, but I know that there are a few sites which I always refer to.

Since February, I started taking note of the guides and cheatsheets I frequently use (I needed a few months because I don't always use all the of 'em at once and I want to collect as many as possible).

Let's start!

CSS Grid

As you know from my previous post, I rely on two solid guides for CSS Grid.

Screenshot of the website

I actually don't use this guide anymore as I can kinda remember all the basic properties by now. But if you're looking to start with CSS Grid and you learn better visually, I would totally recommend this.


Screenshot of the Grid guide by CSS Tricks
CSS Tricks: A Complete Guide to Grid

This is the guide I rely on now, particularly for the thorough explanation of grid-template-areas and examples of grid shorthands.


Screenshot of the CSS Grid Generator by Sarah Drasner
CSS Grid Generator

This is actually a new generator which was released by Sarah Drasner a few days ago. I played with it for a bit and found it quite useful if you want to quickly envision how your grid layout will look (tho, with limitations - e.g. you can't remove a div if you want to).

You can even copy the code, although I advise against it if you're trying to learn, it's better to painstakingly type it all out, trust me.

Cubic-bezier/easing functions for animations

Screenshot of the website

When I am not in the mood for ease or ease-in-out (which amounts up to 2 out of 10 times), this is my go-to site to get me some cubic-bezier functions. Good visual examples and the first site that got me to understand what cubic-bezier actually is back then.

Turns out, I don't really need to read the math stuff (graphs just don't turn me on, sorry); I just needed to see how the easings worked, pick whichever I needed, and copy-paste the code.

Fun fact: I use the same easing function 95% of the time, which is easeOutBack 😂


Screenshot of by Lea Verou by Lea Verou

If you want to make your own cubic-beziers. Move the pink and blue dots on the graph and preview the easing on the right (the pink box, not the blue one). I rarely use this ( has been enough) but this has been used once or twice!


My biggest weakness when it comes to designing. Also my favorite because I'm a masochist.

Screenshot of

If it's a colored background, it's gonna be a gradient, amirite? Because everyone in Dribbble is doing it 🤷‍♀️


Screenshot of 5-way gradient generator pen

There recently was a pen called "5-way Gradient Generator" which blew my mind. This is what you should use when you want to be totally extra with your gradients.


Screenshot of

A very popular tool. I use this to help me pick a set of colors that I almost always not use in the end. Why? Because I have to choose my own colors, and I usually end up hating my palette even though I spent 30 minutes trying to perfect it.

But, I use it a lot to get different shades of a color... and the names.


Screenshot of color picker in Chrome Dev tools
Chrome Dev Tools

For when I'm really lazy or frustrated. I just randomly pick a color here.


I recently attended a conference where Steve Schoger, the author of Refactoring UI, spoke about choosing color palettes. The direct quote was "I can show you how I pick my colors, it's really easy - I just copy them."

Spiderman meeting Spiderman meeting
"You too? Me too!"


Usually I get colors from Dribbble, but recently, I've been "branching out" and started looking at other sites.

Spiderman meeting Spiderman meeting on Instagram

This is my most-used resource so far!

Comparison of two color palettes
My pen vs Colours.Cafe


Awkward monkey meme

Box Shadows, Borders, or Both

I try to remember a lot of CSS properties and values that I use often, but this is one which I don't remember any values at all.

If I ever need a 'one-side only' box shadow, I will have to Google it.

A snippet of a box shadow guide on CSS Tricks

CSS Tricks: Box Shadow for box shadows. And cool hacks for multiple borders here.

Text Things

Text shadows! Anything fancier than my default text-shadow: 0 1px 2px rgba(0,0,0,0.15) (👈 I remember this by heart), I refer to this guide.

A snippet of a text shadow guide on CSS Tricks
CSS Tricks: text-shadow
Screenshot of a text shadow CSS generator
Text Shadow CSS Generator

Used very rarely but super fun to play around.


Screenshot of a CSS shapes guide on CSS Tricks
CSS Tricks: The Shapes of CSS

I've been referring to this article for years now 😂 I always go back for the triangle shape for my tooltips lol. But the other shapes are useful too!

Other weird shapes, background-gradient amazingness and hacks

Screenshot of a CSS illustrations done with a single div
A Single Div by Lynn Fisher

A genius at work! All of the projects here are done with just a single div, which means there's a lot of background gradient and box-shadow craziness going on. I've started to really cut down on my div usage, so I will refer to her work and try to reverse-engineer it.

I certainly have learned a lot by just looking at her code.

... aannndddd, there's also plenty of times when I don't really know what she's doing anyway even after staring at the code for 2 minutes because my brain does not comprehend 😂😭


Gif of browsing
Me looking at the code
Gif of someone looking confused
Me after at the code


I can almost remember the simple ones by now, but it's always good to check!

Screenshot of nth-tested by CSS Tricks
CSS Tricks: nth-tester
Screenshot of nth-test by Top Design Agencies

This one is amazing to use if you need to test a large number of divs. One of my pens had >50 divs and it was so easy to check with this tool.

If you notice, most of my pens are very simple and straightforward, so the guides or tools are also very simple and straightforward. Or maybe it's just because I'm terrible at remembering the simple things 😂

Anyway, that's it! There are more for sure, but they aren't used enough for me include them here.

Tell me your favorite guide, cheatsheet or tool!