SVGOMG: visual SVG optimization
A free browser interface for SVGO, with SVG-code cleanup, smaller files, detailed optimization controls and result comparison.
Resources
Discover useful things. Build your library. Share your finds.
Web Design 19
Squoosh: browser-based image compression
A free tool for compressing, resizing and converting images, with visual quality comparison and local file processing.
Flexbox Froggy: learn CSS Flexbox through play
A free browser game with 24 CSS puzzles. Guide frogs onto their lily pads while learning flex alignment, item order, direction and wrapping.
Site of Sites: curated web design inspiration
A free website gallery with industry, type, style and platform filters, themed collections and links to live projects.
Awwwards Portfolio: portfolio website examples
A large Awwwards collection of portfolio websites for exploring layout, interaction and creative project presentation.
Neumorphism.io: CSS shadow generator for Soft UI
A free generator for neumorphic surfaces, with color, shape and shadow controls and copyable CSS.
Glass3D — glass-effect CSS generator
Tune blur, color and texture for glass-style interface elements, then copy the generated CSS.
Cursor Lab — Custom Web Cursors
A free workbench with 28 custom web cursors, live parameter controls, and copyable JavaScript, React, and CSS code.
UX Pilot Gradient Generator – Gradients & Textured Backgrounds
A browser-based gradient studio with color, texture and motion controls, plus previews inside interface layouts.
ShaderGradient — Animated 3D Gradients for Web, Figma & React
A free open-source tool for creating animated 3D gradients with a visual editor, Figma and Framer integrations, plus ready-to-use React and Vue packages.
Pattern Monster — Seamless SVG Pattern Generator
A free library of 320+ seamless patterns with customizable colors, stroke width and angle, plus CSS/SVG copy and SVG or PNG export.
Heroicons — 316 Free SVG Icons by the Makers of Tailwind CSS
A free library of 316 carefully crafted SVG icons for UI, websites and apps, with a Figma file and official React and Vue libraries.
Iconoir — 1,600+ Free Open-Source Icons
A large free SVG icon library built on a 24×24 grid with support for Figma, Framer, React, React Native, Vue, Flutter and CSS.
Google Design — Product Design Stories, Guides & Resources
Google’s editorial platform covering UX, Material Design, typography, AI, design systems, accessibility and the process behind digital products.
Dark.design — Curated Dark Website Inspiration
A curated gallery of dark-themed websites featuring real examples from agencies, software products, AI companies, hardware brands, personal sites and Web3 projects.
fffuel — Free SVG Generators & Design Tools
A collection of 60+ free browser-based tools for creating SVG backgrounds, gradients, patterns, textures, shapes and color palettes.
Design Spells — UI Details, Interactions & Micro-Animation Inspiration
A curated gallery of 300+ real-world UI details, micro-animations, transitions, Easter eggs and interaction patterns.
Best Website Gallery — Curated Web Design Inspiration
A curated gallery of 2,600+ websites for inspiration in web design, UI/UX, typography, animation and digital interfaces.
Movin Easings – Animation Curve Editor
An easing gallery with a cubic-bezier editor, motion previews and code examples for web animation.