Atlas / Tools
Generators, frameworks, linters, extensions, courses and newsletters for writing CSS. Free and paid, all curated.
Submit a toolKind
Price
Dembrandt
AI & MCPExtracts a website's colours, type, spacing and CSS variables as design tokens, from the CLI or an MCP server.- Stars
- 3,945
- Last commit
- 6 days ago
- Licence
- MIT
CSS MCP Server
AI & MCPGives agents MDN CSS docs and compatibility data, and analyses your stylesheets for complexity and patterns.- Stars
- 338
- Last commit
- 1 year ago
- Licence
- ISC
- mildspringAdCustom notebooks for your e-ink tablet
- Type
- Custom notebook
- Works on
- reMarkable, Kindle and more
- Format
- Linked PDF
Baseline MCP Server
AI & MCPTells your agent the Baseline status and browser support of web features, using Web Platform Dashboard data.- Stars
- 37
- Last commit
- 12 days ago
- Licence
- MIT
MDN MCP server
AI & MCPMDN's own MCP server, giving agents current MDN docs and browser compatibility data for CSS features.- Stars
- 196
- Last commit
- 5 days ago
- Licence
- MPL-2.0
Figma MCP server
AI & MCPSends Figma design context, variables and layout to your coding agent so it can write matching code.- Price
- Freemium, View and Collab seats get up to 20 calls a month. Dev or Full seats on paid plans get daily limits.
- Made by
- Figma
- Kind
- AI & MCP
The modern.css newsletter
New CSS each month, and new things in the Atlas. 806 subscribers. Past issues
Playwright MCP
AI & MCPGives agents a real browser to resize, switch colour schemes and screenshot pages while checking CSS.- Stars
- 39,198
- Last commit
- 3 days ago
- Licence
- Apache-2.0
AI assistance in Chrome DevTools
AI & MCPA Gemini chat panel in DevTools that explains an element's styles and helps fix layout bugs.- Price
- Free, Built into Chrome. You must be signed in, 18 or over, and in a supported location.
- Made by
- Kind
- AI & MCP
Chrome DevTools MCP
AI & MCPLets your coding agent open Chrome, read the CSS cascade for any element and test media features.- Stars
- 54,820
- Last commit
- 2 days ago
- Licence
- Apache-2.0
Frontend Snippets
ReferenceA collection of copy-paste front-end snippets.- Price
- Free
- Made by
- Frontend Snippets
- Kind
- Reference
Flexbox Froggy
GameA game that teaches flexbox by moving frogs onto lily pads.- Stars
- 7,387
- Last commit
- 10 months ago
- Licence
- MIT
Grid Garden
GameA game that teaches CSS Grid by watering a garden.- Stars
- 3,396
- Last commit
- 10 months ago
- Licence
- MIT
CSS Grid course
CourseA free video course on CSS Grid.- Price
- Free
- Made by
- Wes Bos
- Kind
- Course
CodePen
PlaygroundWrite HTML, CSS and JavaScript in the browser and share it as a live demo.- Price
- Freemium
- Made by
- CodePen
- Kind
- Playground
Josh W. Comeau's CSS articles
CourseLong, interactive articles that explain how CSS really works.- Price
- Free
- Made by
- Josh W. Comeau
- Kind
- Course
CSS-Tricks Almanac
ReferenceExplainers for CSS properties, selectors and functions, with examples.- Price
- Free
- Made by
- CSS-Tricks
- Kind
- Reference
Interop 2026
ReferenceThe features browsers agreed to fix together in 2026, with each browser's score.- Stars
- 585
- Last commit
- 4 days ago
- Licence
- Not stated
Chrome Platform Status
ReferenceWhich web features Chrome is building and shipping, release by release.- Stars
- 747
- Last commit
- 2 days ago
- Licence
- Apache-2.0
CSSWG Editor's Drafts
ReferenceThe latest drafts of every CSS spec, updated as the working group edits them.- Stars
- 4,904
- Last commit
- 2 days ago
- Licence
- Not stated
CSS Snapshot 2026
ReferenceThe list of specs that together make up CSS as it stands in 2026.- Price
- Free
- Made by
- W3C CSS Working Group
- Kind
- Reference
CSS Working Group
ReferenceThe W3C's home for CSS: what the working group is doing, its specs and how they're made.- Price
- Free
- Made by
- W3C
- Kind
- Reference
cssdb
ReferenceLists CSS features by how far along they are in becoming standards, with the browsers that support each one.- Stars
- 547
- Last commit
- 12 days ago
- Licence
- MIT-0
Web features explorer
ReferenceBrowse web features by Baseline status, see what's newly available, and what is missing in which browser.- Stars
- 67
- Last commit
- 3 days ago
- Licence
- Apache-2.0
Baseline (web.dev)
ReferenceExplains what Baseline 'newly' and 'widely available' mean and links to tools for checking features against them.- Price
- Free
- Made by
- Google (web.dev) / W3C WebDX Community Group
- Kind
- Reference
MDN CSS reference
ReferenceThe standard reference for every CSS property, selector and function, with examples and browser-support tables.- Stars
- 11,123
- Last commit
- 3 days ago
- Licence
- CC-BY-SA-2.5
Web Platform Status
ReferenceShows the Baseline status of each web feature and how its support and test results have changed over time.- Stars
- 257
- Last commit
- 3 days ago
- Licence
- Apache-2.0
Can I use
ReferenceSearch any CSS feature and see which browser versions support it and how many users that covers.- Stars
- 5,879
- Last commit
- 2 days ago
- Licence
- CC-BY-4.0
Igalia Chats
PodcastBrowser-engine people talking about how features get into browsers, including CSS Working Group news and Interop.- Price
- Free
- Made by
- Igalia (Brian Kardell & Eric Meyer)
- Kind
- Podcast
Syntax
PodcastA popular web development podcast with regular episodes on new CSS features.- Price
- Free
- Made by
- Wes Bos, Scott Tolinski & CJ Reynolds (produced by Sentry)
- Kind
- Podcast
ShopTalk Show
PodcastA weekly chat show about front-end design and development where CSS comes up often (episode 739 out 2 Nov 2026).- Price
- Free
- Made by
- Chris Coyier & Dave Rupert
- Kind
- Podcast
Smashing Newsletter
NewsletterA regular email from Smashing Magazine with front-end and CSS techniques, tools and events.- Price
- Free
- Made by
- Smashing Magazine
- Kind
- Newsletter
The Index (Piccalilli)
NewsletterPiccalilli's free weekly email with a few front-end links and the latest articles.- Price
- Free
- Made by
- Andy Bell & Set.Studio (Piccalilli)
- Kind
- Newsletter
Frontend Focus
NewsletterA free weekly round-up of CSS, browser, accessibility and front-end news.- Price
- Free
- Made by
- Cooperpress
- Kind
- Newsletter
CSS Weekly
NewsletterA free weekly email of new CSS articles, demos and tools.- Price
- Free
- Made by
- Zoran Jambor
- Kind
- Newsletter
HTML & CSS for Absolute Beginners
CourseA free beginner's video course for people writing their first pages.- Price
- Free
- Made by
- Kevin Powell (The Cascade)
- Kind
- Course
CSS Demystified
CourseKevin Powell's in-depth course on why CSS behaves the way it does, so layouts stop surprising you.- Price
- Paid, $249 once
- Made by
- Kevin Powell
- Kind
- Course
Complete CSS
CourseA long course covering how to plan and write CSS for real projects, with the Principles module free to read.- Price
- Paid, £249 once
- Made by
- Andy Bell (Piccalilli)
- Kind
- Course
CSS for JavaScript Developers
CourseAn interactive course that explains how CSS layout really works, aimed at people who build with React or Vue.- Price
- Paid, $149, $279 or $399 once
- Made by
- Josh W. Comeau
- Kind
- Course
Learn CSS
CourseA free, self-paced course from the box model through layout, colour, functions and animation, with demos and podcast episodes.- Price
- Free
- Made by
- Google (web.dev)
- Kind
- Course
Web Developer extension
ExtensionA toolbar for Chrome, Firefox, Edge and Opera that can switch off styles, outline elements and show computed CSS.- Stars
- 846
- Last commit
- 2 years ago
- Licence
- GPL-3.0
Firefox Page Inspector
ExtensionFirefox's built-in inspector, known for its grid and subgrid overlays and its notes on why a CSS rule has no effect.- Price
- Free
- Made by
- Mozilla
- Kind
- Extension
Chrome DevTools
ExtensionThe built-in inspector for editing styles live, with editors for grid, flexbox, colours, shadows, easing and container queries.- Price
- Free
- Made by
- Kind
- Extension
PostCSS Preset Env
LibraryA PostCSS plugin pack that rewrites newer CSS into forms older browsers understand, based on your browserslist.- Stars
- 1,061
- Last commit
- 5 days ago
- Licence
- MIT-0
Lightning CSS
LibraryA very fast Rust tool that minifies, bundles and lowers modern CSS (nesting, oklch, color-mix and more) for the browsers you target.- Stars
- 7,726
- Last commit
- 3 days ago
- Licence
- MPL-2.0
stylelint-plugin-use-baseline
LibraryA Stylelint rule that flags CSS properties, values and selectors that are not yet Baseline, so you know when you need a fallback.- Stars
- 39
- Last commit
- 5 days ago
- Licence
- MIT
Stylelint
LibraryChecks your CSS for mistakes and agreed conventions in the editor or CI, with a large plugin ecosystem.- Stars
- 11,543
- Last commit
- 3 days ago
- Licence
- MIT
CUBE CSS
FrameworkA way of organising CSS (composition, utility, block, exception) that leans on the cascade instead of fighting it.- Price
- Free
- Made by
- Andy Bell
- Kind
- Framework
Every Layout
FrameworkA book and set of layout primitives (Stack, Sidebar, Switcher and more) that adapt to their space without media queries.- Price
- Paid, $69 once
- Made by
- Heydon Pickering & Andy Bell
- Kind
- Framework
Simple.css
FrameworkA single classless stylesheet that makes semantic HTML readable and tidy out of the box.- Stars
- 5,032
- Last commit
- 4 months ago
- Licence
- MIT
Pico CSS
FrameworkDrop-in styles that make plain semantic HTML look finished, with light and dark themes. No longer updated: 2.1.1 (Oct 2026) is the last.- Stars
- 16,822
- Last commit
- Archived
- Licence
- MIT
Open Props
FrameworkA ready-made set of CSS custom properties for colours, sizes, shadows, easings and animations that you pull into your own styles.- Stars
- 5,564
- Last commit
- 26 days ago
- Licence
- MIT
Anchor position tool
GeneratorClick through position-area values and watch where an anchored element lands around its anchor.- Stars
- 16
- Last commit
- 2 years ago
- Licence
- Not stated
scroll-driven-animations.style
GeneratorDemos plus visualisers that show how scroll() and view() timelines and their ranges map to an animation, with a free video course.- Price
- Free
- Made by
- Bramus Van Damme (Google Chrome DevRel)
- Kind
- Generator
Layoutit Grid
GeneratorDraw rows, columns and named areas visually and get the grid-template CSS and matching HTML.- Stars
- 1,745
- Last commit
- 5 years ago
- Licence
- MIT
Clippy
GeneratorDrag the points of a polygon, circle or inset shape over an image and copy the clip-path value.- Stars
- 944
- Last commit
- 2 years ago
- Licence
- Not stated
Linear easing generator
GeneratorConverts a spring, bounce or SVG path easing into a CSS linear() function you can paste into a transition or animation.- Stars
- 164
- Last commit
- 2 years ago
- Licence
- Apache-2.0
Utopia
GeneratorTurns a min and max screen size into a fluid type scale (and a matching space scale) written as clamp() custom properties.- Price
- Free
- Made by
- James Gilyead & Trys Mudford (supported by Clearleft)
- Kind
- Generator
CSS Shadow Palette Generator
GeneratorMakes a matched set of small, medium and large layered box-shadows as custom properties so every shadow on a page shares one light source.- Price
- Free
- Made by
- Josh W. Comeau
- Kind
- Generator
CSS Gradient Generator
GeneratorBuilds gradients that blend through a better colour space so the middle doesn't turn grey and muddy, then gives you the CSS.- Price
- Free
- Made by
- Josh W. Comeau
- Kind
- Generator
OKLCH Color Picker & Converter
GeneratorPick colours in OKLCH, see which ones fall outside sRGB or P3, and copy the CSS value or convert from hex and rgb.- Stars
- 2,018
- Last commit
- 1 month ago
- Licence
- MIT
