css
This is an experimental MCP server that provides access to MDN's search, documentation, and browser compatibility data.
Our goal is to give LLMs and coding agents a reliable and up-to-date source of web platform documentation - so developers can get accurate information instead of potentially outdated content their LLMs were trained on.
Related contents:
CSS reacts, JS just listens. What JS knows, now CSS knows.
Runtime state for CSS. Now there's a Prop For That. Expose what JavaScript knows but CSS can't see — as live CSS custom properties.
A tool set for CSS including fast detailed parser, walker, generator and lexer based on W3C specs and browser implementations.
CSSTree is a tool set for CSS: fast detailed parser (CSS → AST), walker (AST traversal), generator (AST → CSS) and lexer (validation and matching) based on specs and browser implementations. The main goal is to be efficient and W3C spec compliant, with focus on CSS analyzing and source-to-source transforming tasks.
Related contents:
One line of code. Thousands of classes. No Build Step.
Litewind is a stripped back version of Tailwind - the popular utility-first CSS framework, that can be added to your site or app with a single line of code (as opposed to the usual setup steps that Tailwind requires).
Related contents:
The Emoji-First CSS Framework. The CSS framework your team will actually argue about.
BEMoji is a production-grade utility and component framework built entirely on emoji class names. Semantic, systematic, and completely illegible to anyone without the docs.
Motion animations as Tailwind classes.
Write Motion animations as Tailwind-like classes. Zero imports, zero boilerplate, zero runtime overhead. Write Framer Motion animations as Tailwind-style utility classes – Motionwind transforms animate-* classes into motion props at build time with zero imports and zero boilerplate. Motion animations as Tailwind classes. A Babel plugin that transforms animate-hover:scale-110 into whileHover={{ scale: 1.1 }} at build time. Zero imports, zero boilerplate.
Related contents:
SPINNERS is a collection of HTML and CSS "loading icon" animations which you can use on your websites, on your apps or on any other place you need to signal your visitors / users that some content is loading.
Open Source CLI to Extract Design Systems & Tokens.
Extract any website’s design system into design tokens in a few seconds: logo, colors, typography, borders, and more. One command.
Extract design tokens from any website with one command. CSS to design system converter with W3C design tokens export.
Stop writing CSS like it's 2015.
Modern CSS code snippets, side by side with the old hacks they replace. Every technique you still Google has a clean, native replacement now.
Ultra-lightweight, semantic, zero-dependency HTML UI component library.
Oat is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements.
Detect CSS Hacks & Modernise Your Code.
ReliCSS is a "CSS hack" detection tool designed to help developers identify and replace outdated browser-specific CSS hacks with modern, standards-compliant alternatives.
Related contents:
Hotpink vous permet de voyager au pays des couleurs web nommées, découvrir des teintes originales et leur histoire, et organiser et créer des palettes stylées.
OKLCH Color Pattern Generator.
Oklchroma is a color pattern generator that helps designers and developers create harmonious color scales based on the OKLCH color space. Instead of manually defining each shade, Oklchroma generates a complete set of color variables based on a single base color and using mathematical formulas in CSS to generate the rest of the colors.
Collection of animation snippets made for TailwindCSS.
Universal visualizer and analyzer for JavaScript and CSS. Compatible with most bundlers and frameworks.
Sonda is a universal bundle analyzer and visualizer. It generates an interactive HTML report that is more accurate and detailed than some alternatives. The accuracy is achieved by analyzing source maps and showing the size of each module after tree-shaking and minification.
How does your browser score for its support of web platform features?
CSS voxel engine for the DOM.
A CSS voxel engine. A 3D grid for the DOM. Renders HTML cuboids by stacking CSS grid layers and applying transforms.
Supports colors and textures, interactions and culling, plus shapes, areas and projections. All without </canvas>.
Related contents:
Fix Unreadable Colors in Python. Make your text readable for everyone.
CM-Colors automatically fixes your colors so they are easy to read. It finds similar colors that work for everyone, so you don't have to guess.
Related contents:
Type-safe Composable CSS.
From simple UI styles to full Design Systems, write code using Styleframe’s powerful TypeScript CSS API — AI-ready by design. Write type-safe, composable, future-proof Design Systems code using styleframe's powerful TypeScript CSS API.
A design system for building retro Apple-inspired interfaces.
System.css is a CSS library for building interfaces that resemble Apple's System OS which ran from 1984-1991. Design-wise, not much really changed from System 1 to System 6; however this library is based on System 6 as it was the final monochrome version of MacOS.
Related contents:
Explore color as we see it. OKLCH Color Picker, Generator and Converter.
Discover how the OKLCH color model works. Learn, experiment and create more consistent and perceptually uniform color palettes.
The current sky at your approximate location, rendered as a CSS gradient.
Pronounced "Alix".
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.
CSS files are available in French, English, Spanish, Greek, Arabic, Portuguese, Russian, Chinese, Polish and Dutch — and leveled or full.
Related contents:
Useful CSS custom functions using the new @function rule
Design tools and tips for developers in a hurry.
✨😂 2000+ ways to add design flair, user delight, and whimsy to your product.
Related contents:
Beautiful typographic defaults for HTML you don't control.
The official Tailwind CSS Typography plugin provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control, like HTML rendered from Markdown, or pulled from a CMS.
Related contents:
Opinionated Code Formatter.
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Related contents:
Braid aims to make cross-brand UI development as fast as possible while maintaining a high level of quality and accessibility. In order to achieve this, Braid provides as a set of React components and CSS variable-based styling themes using vanilla-extract.
Related contents:
The Braid Design System believes UI (User Interface) components should not provide surrounding white space. For example, a list item having a margin below it to add a gap between itself and the next item. This margin breaks component encapsulation, making it harder to use. A well-built component should not affect anything outside itself.
Related contents:
Style your webpage like Edward Tufte’s handouts.
Edward Tufte uses a distinctive style in his handouts: simple, with well-set typography, extensive sidenotes, and tight integration of graphics and charts. tufte-css brings that style to HTML documents.
a tool for transforming CSS with JavaScript.
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
Related contents:
Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents.
Turn any UI screenshot into clean, editable HTML/CSS with full control. Fast, accurate, and easy to customize.
Zero-runtime Stylesheets-in-TypeScript.
Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.
Related contents:
Components from design to production.The UI Framework for Perfectionists by Chainlift.io.
LiftKit is a UI framework based on the golden ratio. At its core, it's a set of formulas and variables that unlock advanced visual design features like optical spacing corrections and dynamic color, powered by Material 3.
Community-Powered Animation Magic. Get your animations easily done with only Tailwind CSS classes.
An explainer for doing web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript.
This is an overview of the major techniques used to make web sites and web applications without making use of build tools or frameworks, with just an editor, a browser, and web standards.
Critical CSS refers to the minimal set of CSS rules required to render the visible portion of a webpage (above the fold). By extracting and inlining this CSS into your HTML, the browser can render content faster without waiting to load all stylesheets, improving performance and Core Web Vitals like First Contentful Paint (FCP).
Hello, and welcome to CSS Hell, where you will be subjected to 15 unimaginably torturous CSS puzzles. "What did I do to deserve this?", you ask. But you know perfectly well: you blashpemized Cascading Style Sheets. I saw that time your friends were complaining about CSS and you piled on with "CSS isn't even a real programming language"
A comprehensive Tailwind CSS cheat sheet to instantly find all utility classes and their CSS properties in one place.
WebTUI is a modular CSS library that brings the beauty of Terminal UIs to the browser.
Become a better frontend developer.
Take your frontend skills to the next level by recreating real websites from real companies.
The perfect type of practice for developers of all skill levels. Are you up for the challenge?
A web app for creating flexible layouts with the power of CSS Flexbox. Flexbox Labs is a visual tool that helps you create layouts using CSS Flexbox. It offers an intuitive interface that shows changes in real-time, making it easy to experiment and learn.
Related contents:
Run JS when a CSS property changes. Any CSS property.
A robust, production-ready library to observe CSS property changes. Detects browser bugs and works around them, so you don't have to.
Fluid Responsive Design. Elegantly scale type and space without breakpoints.
Instead of tightening our grip by loading up on breakpoints, we can let go, embracing the ebb and flow with a more fluid and systematic approach to our design foundations.
Related contents:
An opinionated CSS starter kit for your "nobuild" application.
An opinionated CSS starter kit for your Ruby on Rails application. You can think of it like a "no build" Tailwind CSS.
the color palette for internet lovers.
uchū is the color palette for internet lovers, by NetOperator Wibby. uchū utilizes the OKLCH color space for reasons. I've been using this color palette for personal projects for about a year and have been quite pleased with it.
Rapidly build modern websites without ever leaving your HTML. A utility-first CSS framework for rapid UI development.
Related contents:
SVG Drawing Animation Generator.
SVG Artista is a tool that helps you animate stroke and fill properties in your SVG images with plain Css code. It should work fine with path, line, polyline, rect, circle, ellipse and polygon elements. It cannot animate SVG gradients though, so please keep that in mind.
Related contents:
1,900+ Free Tailwind CSS Examples. Community-built Tailwind CSS Components Library.
Let's not stress about website designs. Create Stunning UIs Effortlessly, with Over 1900+ Ready to Use Components.
The AI-Powered browser extension for managing colors in CSS Variables
- AI-generated color palettes
- Accessibility testing
- Support for daisyUI and shadcn/ui
Interactive CSS Flexbox Learning Tool.
Experiment with different flex properties to understand how they affect layout. Adjust the controls below to see changes in real-time and copy the generated CSS code.
Animation library for Tailwind CSS Library.
tailwindcss-motion is a Tailwind CSS Plugin made at RomboHQ. It’s a simple, yet powerful, animation library with a simple syntax.
A modern styling framework for content-driven websites 🔥
A UI framework that provides websites with the minimal CSS and JS needed to get started with building a modern responsive beautiful website
Css Toolkit. Functional CSS for humans.
Quickly build and design new UI without writing CSS.
Build better responsive designs in less code.
Scale utilities smoothly between breakpoints with CSS clamp().
A collection of popular CSS layouts and patterns that you can use right away