🌎 English · 🇧🇷 Português
CSS resources list curated for real-world UI problems.
Explore, learn, and contribute.
View Summary
Foundation
Build UIs
- Layout & Positioning
- Responsive Design
- Animation & Visual Effects
- UI & Components
- Forms & UX Patterns
Dev Infrastructure
Quality
Discovery
- Tailwind - Build UIs faster with utility classes without leaving your HTML (library)
- Bulma - Style modern interfaces with Flexbox-based components and zero JavaScript dependencies (library)
- Milligram - Ship clean layouts with minimal CSS defaults that never override your work (library)
- Pure.css - Add responsive UI modules to any project with a tiny CSS payload (library)
- Bootstrap - Pre-built components, responsive grid, and utilities to build consistent UIs fast. (library)
- UIkit - Modular framework with 80+ components for building responsive web interfaces fast. (library)
- Halfmoon - Drop-in Bootstrap replacement with 3 themes, dark mode, and responsive components. (library)
- daisyUI - Tailwind plugin with semantic class names and 30+ themes via CSS variables. (library)
- Preline UI - 640+ Tailwind CSS components and templates ready to use in any framework. (library)
- Vanilla Extract - Write type-safe, zero-runtime CSS in TypeScript with build-time scoped output (library)
- CSS Grid Playground - Learn CSS Grid step by step with interactive browser-native demos and DevTools (playground)
- What The Flexbox?! with Wes Bos - Master Flexbox layout through free video lessons with real browser exercises (course)
- Learn CSS Grid with Wes Bos - Master CSS Grid through free video lessons and hands-on layout projects (course)
- The Layout Maestro by Ahmad Shadeed - Develop a mental model for layout decisions with 70+ interactive written lessons (course)
- Flexbox Froggy - Learn flexbox properties by guiding frogs to lily pads in 24 interactive puzzles. (playground)
- CSS Grid Garden - Interactive game with 28 levels to practice CSS grid layout hands-on. (playground)
- Complete Guide to Responsive Website Design in 2026 - Apply auto-fit grids, fluid typography, container queries, and Core Web Vitals to real-world projects (article)
- Responsive web design basics | Web.dev - Create sites that respond to the needs and capabilities of the device. (guide)
- CSS Container Queries Guide | design.dev - Complete reference for building modular components that adapt to their container size with syntax, units, and patterns (guide)
- CSS container queries | MDN - Official introduction to container size queries with naming contexts, container units, and progressive enhancement fallbacks (reference)
- Animista: On-Demand Animation Library - Pick, customize, and copy CSS animations without writing keyframes manually (library)
- Transition Cubic-Bezier Generator - Craft and preview custom timing curves for smooth CSS transitions (tool)
- Scroll-driven Animations - Visualize and create declarative scroll-driven animations with interactive demos and tools (tool)
- CSS Day 2025: Ultimate Scroller Guide by Adam Argyle - Master scroll-driven animations and performance patterns for modern web pages (video)
- Spinner & Loading Animation Generator | FastTool - Create copy-ready CSS loader animations and presets to style fast-loading indicators quickly. (tool)
- Hover.css - Collection of ready-to-use CSS3 hover effects for buttons, links, and images (library)
- Mocassin.css - Pre-built hover effects for image captions — fadeIn, slideIn, flip, and zoom, no JS needed (library)
- GSAP Scroll Plugins - Scroll-based animation plugins for parallax, smooth scrolling, and scroll-triggered effects. (library)
- CSS-Only Magazine Page-Turning Effect - Pure CSS magazine flip animation that cycles through multiple images without JavaScript (playground)
- Charts.css - Data visualization framework - Render data charts with pure CSS classes applied to semantic HTML tables (library)
- Flowbite - Pre-built Tailwind CSS components to quickly assemble interactive UIs. (library)
- Styling Forms with CSS - Style text fields, buttons, checkboxes, and inputs with accessible states. (guide)
- Pure CSS Accordion - Build a collapsible accordion with only checkboxes and CSS, no JavaScript needed. (playground)
- Gradient Generator - Create and copy custom CSS gradients with a live visual editor (tool)
- Gradients Collection for UI - Browse and copy curated gradient combinations ready for UI backgrounds (tool)
- GradientArt: Advanced Gradient Editor - Build complex multi-stop CSS gradients with precise layer and blending controls (tool)
- Box Shadow Generator - Build and export box shadows visually with real-time layer previews (tool)
- Neumorphism Generator - Generate soft-UI shadows for neumorphic CSS effects with live preview (tool)
- Glassmorphism Generator - Generate blur, transparency, and border CSS for glass-effect UI elements (tool)
- CSS Generators: Your CSS code with less effort - A wide range of CSS Generators (as frames and shapes) to build the future of the web. (tool)
- CSS Reset Generator | FastTool - Generate customized reset stylesheets from popular presets like Normalize, Eric Meyer, and Tailwind Preflight (tool)
- ColorSpace - Generate harmonious color palettes and CSS gradients from a single input color. (tool)
- Fancy Border Radius Generator - Generate complex CSS border-radius shapes visually and copy the value instantly (tool)
Empty. Add your contribution 💜
- Can I Use - Browser Support - Check CSS and HTML feature support across every browser before shipping (tool)
- Specificity Calculator - Compare CSS selectors by specificity score to debug cascade conflicts (tool)
- Sass - Structure large stylesheets with variables, mixins, nesting, and file partials (tool)
- PostCSS - Transform and extend CSS using a composable plugin pipeline at build time (tool)
- Hello, CSS Cascade Layers by Ahmad Shadeed - Learn how @layer controls cascade priority with use cases for theming, specificity control, and utility CSS (article)
- Cascade Layers Complete Guide | CSS-Tricks - Master cascade layers with full syntax reference, layer ordering, !important behavior, and real-world use cases (guide)
- Nesting | web.dev Learn CSS - Learn native CSS nesting from Google's structured curriculum covering selectors, combinators, and nested at-rules (guide)
- Understanding CSS Naming Conventions: BEM, OOCSS, SMACSS and SUIT CSS - Compare to choose the right naming strategy (article)
- CUBE CSS | CUBE CSS - A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism. (reference)
- Atomic Design by Brad Frost - Design systems from atoms to templates using a composable component methodology (course)
- CSS Architecture for Large Projects - Apply ITCSS, BEM, and component scoping to keep stylesheets maintainable and specificity-free as projects grow (article)
- The Art of CSS Architecture: Scalable Stylesheets for Enterprise - Implement CUBE CSS, design tokens, namespaced components, and living style guides in large applications (article)
- CSS Performance Optimization | MDN - Reduce render-blocking with critical CSS, minification, efficient selectors, and GPU-friendly animations (guide)
- CSS Optimization Guide 2025 | DEV Community - Apply content-visibility, PurgeCSS, contain-intrinsic-size, and critical CSS to speed up rendering (article)
- WebAIM: Accessible CSS - Apply CSS accessibly with :focus-visible, reading order alignment, and proper content/presentation separation (guide)
- Web Accessibility Complete Guide 2025: WCAG 2.2, ARIA, Keyboard Navigation - Implement focus indicators, contrast ratios, keyboard navigation, and accessible forms following WCAG 2.2 (guide)
- CSS Wrapped 2025 by Chrome Developers - Recap the 22 CSS and UI improvements shipped in 2025 with live interactive examples (reference)
- CSS in 2025–2026: It's Getting Too Powerful - Survey emerging features like if(), native masonry, anchor positioning, scroll-driven animations, and CSS mixins (article)
- One List To Rule Them All - Catalogs 100+ modern CSS features from the last 5 years, organized by category (reference)
- State of CSS 2025 - Annual survey tracking CSS feature adoption, developer satisfaction, and tooling trends (article)
- Web.dev Learn CSS - Work through structured CSS lessons from Google covering modern layout and cascade (guide)
- CSS-Tricks Almanac - Look up any CSS property or selector with practical usage examples (reference)
- Smashing Magazine - CSS category - Read in-depth CSS articles from practitioners covering modern patterns and techniques (reference)
- freeCodeCamp - CSS filter - Find practical CSS tutorials and step-by-step guides for all skill levels (reference)
- Bram.us - Read deep-dive articles and experiments on modern CSS features like view transitions and scroll-driven animations by Bramus Van Damme (reference)
- CSS Podcast by Una Kravets and Adam Argyle - Deep-dive into CSS properties and features through conversational episodic breakdowns (podcast)
- Syntax by Wes Bos and Scott Tolinski - Stay current on frontend trends through a high-energy developer podcast (podcast)
- Frontend Masters - CSS Courses - Find Frontend Masters CSS courses from fundamentals to advanced UI layouts and animations (course)
- Codepip - Game-based learning platform for CSS layout, selectors, and other web skills. (course)
- Awwwards - Websites of the Day - Browse top-awarded websites worldwide for design trends, creative layouts, and interaction inspiration (showcase)
- CSS Design Awards - Discover daily award-winning websites judged on UI, UX, and innovation for cutting-edge CSS inspiration (showcase)
- Codrops Playground - Gallery of advanced web experiments with live demos pushing animation and design boundaries (showcase)