A curated drawer of CSS and UI design resources, grouped by job. Reach for the section that matches what you're building.
| Resource | Why it is useful |
|---|---|
| Awesome design systems | Big curated list of public design systems to reference and steal patterns from. |
| PaperCSS | Hand-drawn, sketchy CSS framework (repo) — good for playful or wireframe-style UIs. |
| SaaS/desktop shell template | CodePen of a clean app shell layout to base a dashboard on. |
| Template inspiration thread | Twitter thread of UI template ideas. |
| Resource | Why it is useful |
|---|---|
| Type Scale | Generate a modular type scale and the CSS that goes with it. |
| Resource | Why it is useful |
|---|---|
| hihayk/scale | Visual tool (live) for generating color/spacing scales. |
| colord | Tiny, fast color manipulation library. |
| simpler-color | Generate a full palette from a few base colors. |
| tonality | Adjust color tone palettes programmatically. |
| chroma.js | Workhorse color functions: scales, interpolation, conversions. |
| fettepalette | Generate color ramps (demo). |
| iridescent | Tiny single-file color library. |
| Resource | Why it is useful |
|---|---|
| Charts.css | Style charts with pure CSS from HTML markup — no JS. |
| roughViz | Sketchy, hand-drawn-style charts (pairs with PaperCSS). |
| Nivo | React chart components with sensible defaults. |
| AntV G2 | Grammar-of-graphics charting library with a deep example gallery. |
| Resource | Why it is useful |
|---|---|
| Ionicons | Large open icon set (site). |
| Jam icons | Clean, consistent icon set. |
| Iconsax React | Iconsax as React components (site). |
| Jdenticon | Generate unique identicon-style SVG avatars from a string. |
| svg-spinners | Animated SVG spinner icons. |
| Resource | Why it is useful |
|---|---|
| SVG-Loaders | Lightweight animated SVG loading indicators. |
| whirl | CSS-only loading animation collection. |
| react-block-ui | Block a UI region while loading (demo). |
| Elastic progress bar | Springy progress-bar effect. |
| Page preloading effect | Full-page loading transition. |
| Grid loading animations | Loading reveals for grid layouts. |
| Creative loading effects | Assorted loading-effect ideas. |
Tympanus/Codrops demos — good for picking a transition style to reimplement.
| Resource | Why it is useful |
|---|---|
| Page transitions | Core page-to-page transition demos. |
| Page loading effects | Loading-into-page reveal effects. |
| Morphing page transition | Shape-morphing between pages. |
| SVG drawing animation | SVG line-tracing / skeleton draw-in effect. |
| Fullscreen layout transitions | Fullscreen layout-change transitions. |
| Page stack navigation | Stacked-card page navigation. |
| Button-to-page morph | Morph a button into a full page/view. |
| Medium-style hero morph | Hero image expands into the article. |
| Card expansion transition | Card expands into a detail view. |
| Fullscreen book block | Page-turn / book effect. |
| Page reveal effects | Multi-page swipe reveals. |
| Playful trampoline effect | Bouncy "trampoline" reveal. |
| Article intro effects | Scroll-driven hero-into-article transition. |
| 3D grid effect | Grid-to-post transition. |
| transition.css | Drop-in CSS enter/leave transition primitives. |
| Resource | Why it is useful |
|---|---|
| Multi-level menu | Nested multi-level menu pattern. |
| Line menu styles | Minimal line-based menus. |
| Off-canvas menu effects | Slide-in off-canvas / sidebar menus. |
| Sidebar transitions | Animated sidebar reveal styles. |
| Fullscreen overlay nav | Fullscreen mobile nav overlay. |
| Shape overlay nav | Animated shape-overlay mobile nav. |
| Perspective page-view nav | 3D perspective push navigation. |
| Slide & push menus | Slide/push sidebar patterns. |
| Horizontal slide-out menu | Horizontal slide-out menu. |
| Horizontal dropdown / mega menu | Mega-menu dropdown pattern. |
| Menu hover effects | Hover effects for menu items. |
| Morphing sidebar button | Button that morphs into a sidebar. |
| Creative link effects | Animated nav-link underlines/effects. |
| Animated border menus | Desktop-app-style slide-out menu. |
| Circular navigation | Radial / circular nav. |
| Multi-level push menu | Overlapping nested push menu. |
| Header effects on scroll | Header transformations triggered by scroll. |
| Resource | Why it is useful |
|---|---|
| Creative buttons | Assorted button hover/press styles. |
| Button styles inspiration | Broad button-style gallery. |
| Progress button styles | Buttons that show inline progress. |
| Circular progress button | Circular progress around a button. |
| 3D CSS progress bars | 3D-styled progress bars. |
| Particle effect buttons | "Exploding" particle button effects. |
| Resource | Why it is useful |
|---|---|
| Text input effects | Animated label/underline input styles. |
| Fullscreen form | Step-through fullscreen form layout. |
| Minimal form | Clean minimal form styling. |
| Morphing login | Button morphs into a login form. |
| Animated checkboxes / radios | Animated checkbox and radio styles. |
| Natural language form | Sentence-style fill-in-the-blank form. |
| Custom file inputs | Styled custom file-upload inputs. |
| MoreToggles.css | CSS-only toggle switch collection. |
| Resource | Why it is useful |
|---|---|
| Select inspiration | Custom-styled select dropdowns. |
| Simple dropdown effects | Lightweight dropdown reveal effects. |
| Tab styles inspiration | Tab UI style gallery. |
| Tabs (CodePen) | Clean tab component to copy. |
| Tab keyup nav | Keyboard-driven tab navigation pattern. |
| Resource | Why it is useful |
|---|---|
| Responsive table | Table that reflows cleanly on mobile. |
| Resource | Why it is useful |
|---|---|
| Tooltip styles inspiration | Tooltip style gallery. |
| Inline anchor styles | Inline link underline/hover effects. |
| Resource | Why it is useful |
|---|---|
| Morphing search | Search icon morphs into a full search bar. |
| Search UI effects | Assorted search-input reveal effects. |
| Resource | Why it is useful |
|---|---|
| SVG border animation | Animated card border draw-in. |
| Caption hover effects | Hover-reveal captions on cards/images. |
| Animated grid layout | Card grid expands into a full page. |
| 3D box-shadow shading | Fake 3D box rotation with box-shadows. |
| Resource | Why it is useful |
|---|---|
| Zoomerang | Zoom into any element (Evan You's lib). |
| Hover effect ideas | Image hover-reveal effects. |
| Item transitions carousel | Carousel item transition effects. |
| Stack effects | Stacked-card image effects. |
| Fullscreen video player | Fullscreen video player UI. |
| Draggable dual-view slideshow | Drag-to-compare slideshow. |
| Four boxes layout | Quad image-box layout effect. |
| Arrow navigation styles | Styled slider/arrow navigation. |
| uhugrid | Masonry-like auto-layout grid. |
| Author/signature box | Author/email signature box layout. |
| Product feature box | Product/service feature box layout. |
| Resource | Why it is useful |
|---|---|
| react-hot-toast | Lightweight React toast notifications. |
| Notification styles (toast) | Attached/flip toast notification styles. |
| Dialog effects | Modal/dialog entrance effects. |
| Modal window effects | More modal entrance animations. |
| Resource | Why it is useful |
|---|---|
| Pricing tables inspiration | Pricing-table layout gallery. |
| Checkout concepts | Cart/checkout UI concepts. |
| Animated books | 3D book cover/product effects. |
| Resource | Why it is useful |
|---|---|
| Grid/list switcher | Toggle between grid and list views. |
| Dot navigation styles | Dot-style pagination. |
| Vertical navigation indicators | Vertical scroll/pagination indicators. |
| Resource | Why it is useful |
|---|---|
| Icon hover effects | Icon hover animations. |
| Click effects | Click/tap ripple and burst effects. |
| Animated menu icon | Animated hamburger-to-X icon. |
| Animated SVG icons | SVG icons that animate on interaction. |
| Pull to share | Pull-gesture share interaction. |
| Drag & drop interactions | Drag-and-drop UI patterns. |
| Shazam button effect | Pulsing audio-listen button effect. |
| Folder preview ideas | File/folder hover-preview effects. |
| Gooey select | Gooey SVG-filter selector effect. |
| Resource | Why it is useful |
|---|---|
| Animated mesh lines | Animated success/confirmation lines. |
| Success checkmark | Animated success checkmark. |
| Animocons | Animated reaction icons (thumbs up, etc.). |
| Resource | Why it is useful |
|---|---|
| auto-animate | One-line automatic animations for list/DOM changes. |
| stateful-animations | React Motion animation examples. |
| miniparallax | Tiny parallax-scroll library. |
| Animated opening type | 3D translating letter/type animation. |
| Resource | Why it is useful |
|---|---|
| Preader dark mode preview | Reader-mode preview tool with a smooth dark-mode toggle animation. |
| Resource | Why it is useful |
|---|---|
| inspx | Pixel-perfect spacing inspector overlay for the browser. |
| guides | Draggable ruler/guideline overlay. |
| Megatype | Baseline grid / typographic rhythm tool. |
| CodePen loved pens | My collection of favorited CodePens — running inspiration feed. |