CSS Tools Directory

31 tools

Hand-picked CSS generators, animation libraries, layout tools, frameworks, and utilities — all free, curated for frontend developers.

All Generators Animations Layouts Utilities Frameworks Gradients Typography Icons

Share on X LinkedIn

31 tools

layouts

Border decore

Automatically generate a llms-full.txt file with all the contents of your site. Automatically genera

#css#gradient#border

utilities

paid

CSS Scan

Hover over any element in Chrome to instantly copy its complete CSS.

#devtools#inspector#extension

utilities

Stylelint

The modern CSS linter — catches errors, enforces conventions, scales with teams.

#linting#code-quality#stylelint

utilities

Autoprefixer

PostCSS plugin that adds vendor prefixes automatically using Can I Use data.

#autoprefixer#vendor-prefixes#postcss

utilities

PostCSS

Transform CSS with JavaScript plugins — autoprefixer, nesting, variables.

#build-tool#plugins#postcss

utilities

PurgeCSS

Remove unused CSS from your bundle for smaller, faster stylesheets.

#optimization#purge#build-tool

utilities

CSS Stats

Analyse any website's stylesheet for complexity, specificity, and bloat.

#analysis#audit#specificity

utilities

Can I Use

Browser support tables for every CSS feature, updated weekly.

#compatibility#browser-support#reference

utilities

CSS-Tricks

The definitive CSS reference, almanac, and tutorial hub for developers.

#reference#tutorials#almanac

utilities

CSS Reference

Visual, illustrated reference for every CSS property with live examples.

#reference#documentation#properties

utilities

Tailwind CSS Cheat Sheet

Searchable, filterable reference for every Tailwind CSS utility class.

#tailwind#reference#cheatsheet

animations

Magic Animations

CSS animation library with dramatic, attention-grabbing entrance effects.

#animation#library#effects

animations

Whirl CSS

100+ pure CSS loading animations with a searchable, copyable library.

#loaders#animation#spinners

generators

Haikei

Generate unique SVG blobs, waves, and layered shapes for backgrounds.

#svg#blobs#waves

generators

Hero Patterns

80+ SVG background patterns as CSS background-image, colour-customisable.

#background#patterns#svg

generators

CSS Background Patterns

Pure CSS repeating background patterns with color and scale controls.

#background#patterns#gradient

generators

Smooth Shadow

Generate multi-layer, eased box-shadows that look natural, not flat.

#shadow#box-shadow#easing

generators

CSS Shadow Palette Generator

Create layered, cohesive box-shadow systems with perceptual color science.

#shadow#box-shadow#elevation

generators

Fancy Border Radius

Generate organic blob shapes using CSS border-radius eight-value syntax.

#border-radius#shapes#blobs

generators

CSS Filter Generator

Build CSS filter chains visually and preview on any image in real time.

#filter#image#effects

utilities

Easing Functions Cheat Sheet

Visual reference for every CSS easing function with live animation demos.

#easing#animation#reference

utilities

Cubic Bezier

Drag control handles to create and compare custom CSS easing curves.

#easing#animation#timing-function

animations

CSS Loaders

600+ pure CSS loading spinners and animations, copy in one click.

#loaders#spinners#animation

animations

Keyframes.app

Visual CSS animation timeline editor with shadow, color, and easing tools.

#animation#keyframes#timeline

Loading tools…

CSS Tools Directory

Border decore

CSS Scan

Stylelint

Autoprefixer

PostCSS

PurgeCSS

CSS Stats

Can I Use

CSS-Tricks

CSS Reference

Tailwind CSS Cheat Sheet

Magic Animations

Whirl CSS

Haikei

Hero Patterns

CSS Background Patterns

Smooth Shadow

CSS Shadow Palette Generator

Fancy Border Radius

CSS Filter Generator

Easing Functions Cheat Sheet

Cubic Bezier

CSS Loaders

Keyframes.app

Categories

Tags

Border decore

CSS Scan

Stylelint

Autoprefixer

PostCSS

PurgeCSS

CSS Stats

Can I Use

CSS-Tricks

CSS Reference

Tailwind CSS Cheat Sheet

Magic Animations

Whirl CSS

Haikei

Hero Patterns

CSS Background Patterns

Smooth Shadow

CSS Shadow Palette Generator

Fancy Border Radius

CSS Filter Generator

Easing Functions Cheat Sheet

Cubic Bezier

CSS Loaders

Keyframes.app