neat-annotations
Arrows and handwritten labels for your website. Pure CSS, no JavaScript.
Showing 59 resources tagged with #code.
Front-End Checklist
Trusted front-end quality rules for humans and AI agents
FrontendAtlas
Frontend Interview Prep: Questions, Coding & System Design
View Transitions Toolkit
A collection of utility functions to more easily work with View Transitions
Vibe Coding UI Specification
Turn visual direction into explicit UI constraints for AI agents
The Field Guide to Grid Lanes
An interactive demo of Masonry layouts in pure CSS
SmoothCSS
A design system, CSS framework and UI kit – all in a two small files
NotebookLM Slide Styles Collection
A curated collection of visual design styles for NotebookLM slide generation
LiquidGlass
Realistic WebGL glass effects for any HTML element — refraction, blur, chromatic aberration, specular highlights, and more.
Intermission
Loaders, in three prints. Six states. Three visual worlds. One API.
dev.css
A lightweight, simple, classless CSS framework
CodeFronts
Free CSS Components, Generators & Frontend Tools
Astro LilyPond
Render text to music notation with Astro
ReliCSS
Detect CSS Hacks & Modernise Your Code
Pokemon Cards V2
Pokémon Cards CSS Holographic Effect
Graphite
A free, open source vector graphics editor and animation engine
Glass3D generator
A modern 3d glassmorphism generator
EaseMaster
CSS & Spring Easing Generator
CSS Editor - getButterfly
Online visual CSS Editor with instant live preview
ColorFlow
Advanced Mesh Gradient Generator & Editor
Waveform Renderer
High-performance audio waveform visualization library for the web
ITOA: Image to ASCII Converter
Convert images to ASCII art with optional color support
Tailwind CSS Gradient Generator
Easily create beautiful Tailwind CSS gradients with GradientDeck
Tailwind Colors
All the Tailwind CSS colors in a handy cheatsheet
SVG Loaders
100+ Open Source SVG Spinners
Easing Wizard
CSS easing functions made easy
Easing Graphs
A collection of easing graphs for web developers
Whirl
CSS loading animations with minimal effort!
CSS Grid Generator
Create custom CSS grid layouts more easily
SVGViewer
An online tool to view, edit and optimize SVGs
Boring Utils
Free, privacy-first daily utilities
Gradientor
A minimalist, beautiful Radial Background Generator
SVGFM
A node graph builder for SVG filters
SVG Encoder / Converter
A simple tool to convert an SVG into different formats
Specificity battle!
CSS Specificity calculator
CSS Generators: Tooltips & Speech Bubbles
A CSS-only collection of Tooltips & Speech Bubbles made with a single element
Bootstrap 5 Modern Backgrounds
Plug 'n play modern background made with Bootstrap, CSS variables, and plain CSS
Loadership
Customize and generate stunning loaders for your website
GitHub Profile Generator
Create awesome GitHub profiles and showcase your skills and projects easily
JSONGenerator
Create complex JSON data structures using intuitive templates
Flexbox Labs | Flexbox
A visual tool for experimenting with flexbox layouts.
.classnames
Find inspiration for naming things
Flexer
CSS flexbox playground
CSS Loaders
The Biggest Collection of Loading Animations
CSS Pattern
Fancy backgrounds with CSS gradients
Make Bookmarklets
Create and test bookmarklets in your browser
Transform
A polyglot web converter
Scrollbar.app
Simple CSS scrollbar editor
Magic animations
CSS3 Animations with special effects
Website Metadata
Generate a complete list of HTML meta tags for your website
Theme Toggles
A collection of animated toggles for switching between light and dark modes
Shoelace
A forward-thinking library of web components
Flexbox labs | Grid
A visual tool for experimenting with grid layouts
AgnosticUI
One branded theme… all the frameworks
CSS Spinners
Small, elegant pure css spinner for ajax or loading animation
AnimatiSS
A collection of CSS animations
SVG Spinners
A collection of 24 x 24 dp animated SVG spinners!
A11Y.md
AI skill to build accessible interfaces
AI CSS Animations
Make complex animations with your voice and AI