Scott Spence

Scott's Digital Garden.

CSS Resources From Around the Web

This is a collection of some handy snippets and resources I collected which I'm going to be documenting here, it's probably going to be a mess but it mainly for my reference.

Big thanks to Steve Schoger and Adam Wathan 🙏

Check out Refactoring UI and the Refactoring UI YouTube channel for more hot tips 🔥


From Adam Wathan:

Ever run into annoying CSS layout bugs that are hard to troubleshoot? (WHY IS THERE A HORIZONTAL SCROLLBAR WHERE IS THIS COMING FROM?!?)

Throw this style into your dev tools to see the boundaries of every element without affecting the layout:

1* {
2 outline: 1px solid red !important;


From Steve Schoger:

Working with images that clash with each other? Try desaturating them to greyscale or colourising them all with a single colour to make them a little more cohesive.

desaturating images

Also, containing photos in circles - Great way to make a bad photo look good

circle images


There is a lot of content out there for this but I have found some quite nice ones.

Gradient maker:

Nice Gradient Swatches:

Animated gradients, via Chris Biscardi, example: animated gradients Codesandbox


HSLA Colour picker: A Most Excellent HSL Color Picker

Colour contrast picker, this will give you a selection of colours with a 4.5:1 ratio: tanaguru contrast finder

Leet speak and colours:

For getting shades of a colour I lke to use 0to255 :

Colour Space has a nice UI for creating colour pallets:

Adobe Colour Wheel has good presets for picking colour pallets:

Automatic UI Colour Palette Generator:

Name a colour from hex:

Hello Colour:

Beautiful colour scales Colour Box:

Colour Scale:

React colour tools:

Internal browser colour names

I've asked this question a couple of times before, "is there a way to list the internal browser colours?"

The last time I asked Mathias Bynens answered!

If you want the list go to the the CSS3 spec and run this snippet in the dev console:

2 ...document.querySelectorAll(
3 '.named-color-table [id^="valdef-color-"]'
4 ),
5].map(element => element.textContent)

Neumorphism is a cool tool for generating your neumorphism boxes:


Glitch Text Effect:

Fancy Border Radius:

Numbers in CSS

Width for elements changing when using numbers? Check: font-variant-numeric

I asked and the community of course responded!

I also found the original tweet I saw from Wes Bos back in 2017!

CSS Grid

CSS Grid has a good UI for building CSS Grid Layouts:

New CSS Logical Properties

New CSS Logical Properties!: medium post