Skip to main content

Blog & Articles Frontend Toolkit CSS Snippets Tools Jobs

The refined CSS tools directory. Hand-picked resources for frontend developers who care about quality.

Directory

All Tools
CSS Snippets
Frontend Toolkit
Blog & Articles
Jobs
Partners
FAQ

Tools by Category

Generators
Animations
Layouts
Utilities
Frameworks
Gradients
Typography

Submissions

Submit a Tool
Submit a CSS Snippet
Post a Job
Write for Us
Get a Badge

Legal

About Us
Team
Contact Us
Privacy Policy
Terms of Service
Disclaimer
Editorial Policy
Sources & References

© 2026 CSSAWWWARDS · Built for CSS developers · Not affiliated with Awwwards

Home
/
Tools

CSS Tools Directory

37 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

Categories

All tools
Generators
Animations
Layouts
Utilities
Frameworks
Gradients
Typography
Icons

Tags

#almanac #analysis #animation #audit #autoprefixer #backdrop-filter #background #blobs #blur #border-radius #box-shadow #browser-support #build-tool #cheatsheet #clip-path #code-quality #color #compatibility #css #devtools #documentation #easing #effects #elevation

Weekly CSS picks

New CSS tools, straight to your inbox.

Email address

Search site

37 tools

MeshSVG preview

MeshSVG

Free grainy mesh gradient generator. Copy CSS or SVG instantly — no signup, no watermark.

#mesh gradient#css generator#svg

UI8 Icons preview

UI8 Icons

1365+ icon packs for web, iOS, Android, and print-ready design projects.

#icon#icons#web

Upclimb Online Color Picker preview

Upclimb Online Color Picker

Free CSS color picker with HEX, RGB, HSL, HWB, palettes, website colors, and WCAG contrast checks

#color#color picker#color palette

CSS Box Shadow Generator preview

CSS Box Shadow Generator

A free, no-signup tool for visually building layered CSS box-shadows. Adjust offset, blur and spread

#css#box shadow#generator

Stream Line HQ preview

Stream Line HQ

50x larger sets than other icon libraries. 12 years of meticulous craft. Free version available ✨

#icon#icons#svg

CSS Minifier & FormatterImage preview missing

CSS Minifier & Formatter

CSS Minifier & Formatter is a powerful online tool that helps developers optimize their CSS code...

Magnific Icons preview

Magnific Icons

One platform for all kinds of icons

#icon#icons#svg

CSS Scan preview

CSS Scan

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

#devtools#inspector#extension

Stylelint preview

Stylelint

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

#linting#code-quality#stylelint

Autoprefixer preview

Autoprefixer

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

#autoprefixer#vendor-prefixes#postcss

PostCSS preview

PostCSS

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

#build-tool#plugins#postcss

PurgeCSS preview

PurgeCSS

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

#optimization#purge#build-tool

CSS Stats preview

CSS Stats

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

#analysis#audit#specificity

Can I Use preview

Can I Use

Browser support tables for every CSS feature, updated weekly.

#compatibility#browser-support#reference

CSS-Tricks preview

CSS-Tricks

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

#reference#tutorials#almanac

CSS Reference preview

CSS Reference

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

#reference#documentation#properties

Tailwind CSS Cheat Sheet preview

Tailwind CSS Cheat Sheet

Searchable, filterable reference for every Tailwind CSS utility class.

#tailwind#reference#cheatsheet

Magic Animations preview

Magic Animations

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

#animation#library#effects

Whirl CSS preview

Whirl CSS

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

#loaders#animation#spinners

Haikei preview

Haikei

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

#svg#blobs#waves

Hero Patterns preview

Hero Patterns

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

#background#patterns#svg

CSS Background Patterns preview

CSS Background Patterns

Pure CSS repeating background patterns with color and scale controls.

#background#patterns#gradient

Smooth Shadow preview

Smooth Shadow

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

#shadow#box-shadow#easing

CSS Shadow Palette Generator preview

CSS Shadow Palette Generator

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

#shadow#box-shadow#elevation

Share:

Share on X LinkedIn