CSS & UI Kits — Useful Sites

Animista

2026-09-18T00:00:00Z

A library of ready CSS animations you can play, tweak and copy the code from. Unlike adding a whole library such as animate.css, you take only the code for the animation you need.

https://animista.net

Autoprefixer

2026-09-18T00:00:00Z

A tool that automatically adds browser prefixes (‑webkit‑, ‑moz‑) to CSS. Unlike adding them by hand it knows which prefix is needed from current browser data.

https://autoprefixer.github.io/

Awesome Ant Design

2026-09-18T00:00:00Z

A resource list for Ant Design, the enterprise-class UI design language. Unlike Material UI, its components target data-heavy enterprise interfaces; the list gathers community components and templates.

https://github.com/websemantics/awesome-ant-design

Awesome CSS

2026-09-18T00:00:00Z

A list gathering the CSS language, tools and resources by topic. Unlike learning-focused CSS lists, it also covers frameworks, tooling and methodologies such as BEM.

https://github.com/awesome-css-group/awesome-css

Awesome CSS Learning

2026-09-18T00:00:00Z

A resource list focused on learning the CSS language and its modules — Flexbox, Grid, selectors. Unlike general CSS lists, it picks resources that teach the language itself, not frameworks or tools.

https://github.com/micromata/awesome-css-learning

Awesome PostCSS

2026-09-18T00:00:00Z

A resource list for PostCSS, the tool that transforms CSS with plugins. Unlike preprocessors such as Sass, every transformation is a separate plugin; the list groups them by purpose.

https://github.com/jdrgomes/awesome-postcss

Awesome Tailwind CSS

2026-09-18T00:00:00Z

A list of plugins, components, templates and tools for Tailwind CSS. Unlike the official docs, it collects community-made component kits and helper tools.

https://github.com/aniftyco/awesome-tailwindcss

BuildBootstrap

2026-09-18T00:00:00Z

Builds a Bootstrap layout visually by drag and drop and generates its code. Unlike writing it by hand, you see the grid while you build it; the trade-off is that later customisation is still manual.

https://buildbootstrap.com/

Bulma

2026-09-18T00:00:00Z

A modern framework built purely from CSS (no JavaScript), based on Flexbox. Unlike Bootstrap it ships no JS components — you take the classes and write your own interactions.

https://bulma.io/

Buttons Generator

2026-09-18T00:00:00Z

Ready CSS button styles with their code for use in projects. Unlike component libraries it adds no dependency — click and copy plain CSS.

https://markodenic.com/tools/buttons-generator/

Cruip

2026-09-18T00:00:00Z

Modern landing-page and UI templates (Tailwind-heavy). Unlike building from scratch you get a ready, coherent page; some are free, the fuller templates are paid.

https://cruip.com/

CSS Battle

2026-09-18T00:00:00Z

A game where you reproduce a target image with as little CSS code as possible. Unlike tutorials it sharpens skill through competition and scoring.

https://cssbattle.dev/

CSS Formatter

2026-09-18T00:00:00Z

Un-minifies and formats CSS back into a readable shape. Unlike a minifier it expands a compressed file — useful when you need to read someone else’s stylesheet.

https://www.cleancss.com/css-beautify/

CSS Layout

2026-09-18T00:00:00Z

Ready CSS recipes for common layouts and components (cards, centring, sticky header). Unlike searching it gives each pattern as a copyable, self-contained example.

https://csslayout.io/

CSS Media Query Generator

2026-09-18T00:00:00Z

Generates CSS media queries for specific device sizes. Unlike writing them by hand, you pick common device breakpoints from a ready list.

https://simplecss.eu

CSS Minifier

2026-09-18T00:00:00Z

A simple tool that minifies CSS by stripping whitespace and comments, with an API too. Unlike build-pipeline tools such as cssnano or esbuild, it handles a one-off job with nothing to install.

https://cssminifier.com/

CSS Reference

2026-09-18T00:00:00Z

A reference showing every CSS property with a visual example. Unlike the spec it explains “what does this property do” with a live demo rather than text.

https://cssreference.io/

cubic-bezier.com

2026-09-18T00:00:00Z

Lea Verou’s tool to craft CSS easing curves by hand and compare them against presets live. Unlike easings.net, you build your own curve by dragging handles rather than picking a preset.

https://cubic-bezier.com

Easings.net

2026-09-18T00:00:00Z

Visualises common easing curves and lets you copy the cubic-bezier for each. Unlike cubic-bezier.com, you choose among named presets rather than building a curve.

https://easings.net

Fancy Border-Radius

2026-09-18T00:00:00Z

A visual tool that generates CSS border-radius for organic shapes. Unlike writing it by hand, you tune the eight-value (slash) syntax by dragging handles.

https://9elements.github.io/fancy-border-radius/

FreeFrontEnd

2026-09-18T00:00:00Z

A large directory of HTML, CSS and JavaScript code samples and tutorials. Unlike searching CodePen, it classifies examples by type — buttons, menus, cards, animation.

https://freefrontend.com/

Layoutit Grid

2026-09-18T00:00:00Z

A tool to draw a CSS Grid layout by drag-and-drop and generate its code. Unlike writing grid by hand you build the row/column structure visually and export it.

https://grid.layoutit.com/

Material UI

2026-09-18T00:00:00Z

A React component library implementing Google’s Material Design. Unlike Ant Design it follows the Material guidelines closely; the theming system can move you away from that look, but it takes work.

https://mui.com/

NES.css

2026-09-18T00:00:00Z

A CSS framework with a retro 8-bit NES look. Unlike frameworks such as Bootstrap it supplies style, not behaviour: it is CSS only and needs no JavaScript.

https://nostalgic-css.github.io/NES.css/

Neumorphism.io

2026-09-18T00:00:00Z

A tool generating CSS for soft-shadowed “neumorphism” boxes. Unlike writing shadows by hand it lets you tune the dual shadow visually and gives the code.

https://neumorphism.io/

Normalize.css

2026-09-18T00:00:00Z

A small CSS base that evens out default styling differences across browsers. Unlike CSS resets it keeps the useful defaults instead of wiping everything, and fixes only the inconsistencies.

https://necolas.github.io/normalize.css/

Pure.css

2026-09-18T00:00:00Z

A tiny, modular CSS framework of just a few KB (Yahoo). Unlike large frameworks you take only the module you need and keep the page light.

https://purecss.io/

uiGradients

2026-09-18T00:00:00Z

A tool that shows ready CSS gradients and gives their code. Unlike mixing colours by hand you pick a pleasing transition and copy it straight.

https://uigradients.com/

W3C CSS Validator

2026-09-18T00:00:00Z

Validates CSS against the official W3C rules, accepting a URL, a file or pasted text. Unlike linters such as Stylelint, it checks conformance to the standard, not style.

https://jigsaw.w3.org/css-validator/

CSS-Tricks Snippets

2026-08-21T20:53:20Z

An archive of snippets for CSS, HTML, JavaScript and .htaccess built up over years. Against scattered blog posts each snippet has its own page and discussion — and the comments usually hold a better version.

https://css-tricks.com/snippets/

Easing Wizard

2026-08-21T20:53:20Z

A visual builder for CSS easing curves that covers not just cubic-bezier but linear() spring and bounce curves. That linear() support is what dates it past cubic-bezier.com: spring animation in CSS no longer needs a library.

https://easingwizard.com/

Uiverse

2026-08-21T20:53:20Z

A community-contributed gallery of open-source UI elements: buttons, cards, loaders, toggles. Unlike CodePen, everything is MIT-licensed, copy-paste ready and offered as plain CSS or Tailwind, with no framework attached.

https://uiverse.io/

CSS-Tricks

2026-08-19T23:34:04Z

Two decades of CSS technique, whose Flexbox and Grid guides became widely cited references. Faster than the spec when you are hunting a specific layout problem.

https://css-tricks.com/

Flexbox Froggy

2026-08-19T23:34:03Z

The Flexbox sibling of Grid Garden, teaching alignment by positioning frogs. Unlike reading the docs you see every property’s effect at once — it settles the justify-content versus align-items confusion in twenty minutes.

https://flexboxfroggy.com/

Grid Garden

2026-08-19T23:34:00Z

A 28-level game teaching CSS Grid by watering carrots. Properties like grid-column and grid-area stick when you type them rather than read them.

https://cssgridgarden.com/

Foundation for Sites

2026-08-17T20:53:20Z

The long-running alternative to Bootstrap: a responsive front-end framework with an XY grid, accessibility-minded components and a separate edition for HTML email. Against Bootstrap it imposes fewer visual opinions — components arrive unstyled and you bring the design. Caveat: the last release was September 2024 and the last push January 2025. The project is not archived, but it has been dormant since then and its marketing site still advertises a webinar from 2017.

https://get.foundation/sites.html

Bootstrap

2026-04-20T13:01:01Z

Ready components and a grid system that get you a working interface without design decisions. Unlike Tailwind it hands you finished components rather than building blocks; the cost is that a Bootstrap site is recognisable from a distance.

https://getbootstrap.com/

Tailwind CSS

2026-04-20T13:01:00Z

You style with utility classes and the build step drops unused ones, so the CSS file stops growing. Unlike Bootstrap it hands you building blocks rather than components — the look is entirely yours.

https://tailwindcss.com/

Rare UI

2026-04-17T19:03:38Z

Curated library of expressive UI components with polished animations for modern web apps; emphasizes visual craft and motion unlike generic enterprise design systems.

https://www.rareui.com/

Beautiful UI

2026-04-17T19:01:52Z

Collection of modern UI components and micro-interactions ready to copy into Tailwind CSS and React projects; follows the copy-paste source approach rather than installing a heavy component dependency.

https://www.beautifului.dev/