CSS & UI Kits

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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

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.

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

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.