100 Free CSS Designs

Trending UI styles built as real pages, with a live demo and a single HTML file for each one. No framework, no build step, free for commercial use.

Live gallery: https://mmrahmanbappi.github.io/100-css-designs/

All designs

#	Design	Example	Live	Preview
001	Glassmorphism	Harbor, a savings app landing page	Demo
002	Liquid Glass	Tidewell, a weather app screen	Demo
003	Neumorphism	Hearth, a smart home control panel	Demo
004	Claymorphism	Pebble Math, a kids learning app	Demo
005	Frosted Aurora	Stillwater, a sleep and calm app	Demo
006	Soft UI	Loom, a weekly planner dashboard	Demo
007	Skeuomorphism	Field Journal, a notes app	Demo
008	Tactile Buttons	Clack, a keyboard shop with a working calculator	Demo
009	Jelly UI	Wobble, a gelato shop	Demo
010	Paper Stack	Crumb, a family recipe box	Demo
011	Neo Brutalism	Stackd, an invoicing tool for freelancers	Demo
012	Raw Brutalist	KXLR, a community radio station	Demo
013	Swiss Grid	Grid Days, a design conference in Zurich	Demo
014	Bold Type Hero	Pace, a running club	Demo
015	Anti Design	Static Bloom, an indie record label	Demo
016	Y2K Revival	Starlite, a mixtape playlist site	Demo
017	Memphis	Confetti Co., a party planner	Demo
018	Retro Pixel	Frog Knight, an indie game launch page	Demo
019	Newspaper Editorial	The Harbor Gazette, a local news site	Demo
020	Risograph Poster	Ink Fest, a zine fair	Demo
021	Bento Grid	Orbit, a smartwatch product page	Demo
022	Masonry	Frame Club, a photo community	Demo
023	Split Screen	Salt and Ember, a wood fire restaurant	Demo
024	Broken Grid	Nomad Linen, a fashion lookbook	Demo
025	Scrollytelling	Hilltop Roasters, a bean to cup story	Demo
026	Horizontal Scroll	A museum timeline of 100 years of trams	Demo
027	Full Bleed	North Atlantic Walks, a hiking tour company	Demo
028	Card Carousel	Kiln, a pottery class studio	Demo
029	Magazine Layout	Tide and Table, a food and travel magazine	Demo
030	Long Form Page	Plant a Street, a charity annual report	Demo
031	Chat UI	Wayfarer, an AI travel assistant	Demo
032	AI Dashboard	Signalboard, an AI customer support dashboard	Demo
033	AI Glow Gradient	Quill, an AI writing assistant	Demo
034	Prompt Box Hero	Buildwell, an AI website builder	Demo
035	Node Workflow Canvas	Relay, an automation builder	Demo
036	Streaming Text	Recap, an AI meeting notes tool	Demo
037	Terminal Developer	shipit, a command line deploy tool	Demo
038	Linear Style Minimal	Tracklet, an issue tracker	Demo
039	Spotlight Cards	Lumen, an API platform	Demo
040	Holographic	Nova Pass, a festival membership card	Demo
041	Aurora Gradient	Solace, a skincare brand	Demo
042	Duotone	Harbor Film Festival	Demo
043	Monochrome	Atelier Verde, an architecture studio	Demo
044	Dark Mode First	Ledgerly, a budget app	Demo
045	Neon Cyberpunk	Voltage Arena, an esports tournament	Demo
046	Earthy Natural	Rootstock Farm, an organic veg box	Demo
047	Pastel Dream	Cloud Nine, a baby clothing shop	Demo
048	High Contrast Accessible	Brookfield Council, a local government site	Demo
049	Grainy Gradient	Late Signal, a podcast	Demo
050	Glow Borders	Northstar, a hosting pricing page	Demo
051	Kinetic Type	Shift, a dance studio	Demo
052	Variable Fonts	Flexa, a type foundry specimen page	Demo
053	Oversized Serif	Maison Clair, a boutique hotel	Demo
054	Outline Text	Museum of Sound, an exhibition site	Demo
055	Mixed Font Pairing	Paper Lantern, an independent bookshop	Demo
056	Image in Text	Alpenglow, a ski resort	Demo
057	Gradient Text	Sunset Sound, a festival lineup	Demo
058	Handwritten Accents	Nonna's Kitchen, a cooking school	Demo
059	Monospace	Byte Sized Weekly, a developer newsletter	Demo
060	Vertical Text	Kumo, a Japanese tea house	Demo
061	Scroll Driven Animation	Volt Ride, an e-bike product page	Demo
062	View Transitions	Fork and Field, a recipe site	Demo
063	Micro Interactions	Streak, a habit tracker	Demo
064	Layered Parallax	Pinecrest, a campground	Demo
065	Marquee Ticker	Northline, a design studio	Demo
066	Morphing Blobs	Bloom, a therapy practice	Demo
067	Hover Reveal	Studio Halden, an interior design studio	Demo
068	Staggered Entrance	Pipeline, a CRM landing page	Demo
069	Skeleton Loaders	Morning Brief, a news app	Demo
070	Cursor Effects	Oddfellow, a creative studio	Demo
071	3D Tilt Cards	Postcard Club, a postcard subscription	Demo
072	Isometric	Stackyard, a fulfillment warehouse	Demo
073	Layered Shadows	Forma, a furniture maker	Demo
074	Floating Elements	Driftwood, a to-do app	Demo
075	Perspective Scroll	Fieldnote, a year in review page	Demo
076	Flip Cards	Palabra, a Spanish flashcard app	Demo
077	3D Product Box	Kettle Lane, a tea brand	Demo
078	Spatial UI	Habitat, a spatial meeting workspace	Demo
079	Depth Blur	Terraza, a family winery	Demo
080	Stacked Scroll Cards	Harvest Planner, a garden app	Demo
081	Japandi	Mado, a ceramics and homeware shop	Demo
082	Scandinavian	Fjell, cabin rentals in Norway	Demo
083	Cottagecore	Bramble and Bee, a farm jam shop	Demo
084	Dark Academia	Ravenhall, a reading society	Demo
085	Vaporwave	Palm Mall FM, a synth music label	Demo
086	Solarpunk	Sunroot, a community solar co-op	Demo
087	Bauhaus	Weimar Workshop, a design exhibition	Demo
088	Art Deco	The Gilded Lily, a cocktail bar	Demo
089	Islamic Geometric	Riad Zellige, a guesthouse in Marrakech	Demo
090	Guochao	Moonrise Bakery, handmade mooncakes	Demo
091	SaaS Landing Page	Formly, a form builder	Demo
092	Pricing Table	Notecraft, a notes app	Demo
093	Minimal Portfolio	Ana Ribeiro, a product designer	Demo
094	Docs Site	Quarry, an API documentation site	Demo
095	Shop Product Grid	Loop and Knot, a knitwear shop	Demo
096	Analytics Dashboard	Tally, a web analytics tool	Demo
097	Blog	Small Kitchen Diaries, a food blog	Demo
098	Link in Bio	Juno Hale, a musician	Demo
099	Waitlist Page	Brightwell, a sleep app before launch	Demo
100	Directory Listing	Course Compass, a college finder	Demo

Categories

• 1. Soft and Tactile UI (live)
• 2. Bold and Raw (live)
• 3. Layout Patterns (live)
• 4. AI Era Interfaces (live)
• 5. Color and Light (live)
• 6. Typography (live)
• 7. Motion (live)
• 8. 3D and Depth (live)
• 9. Cultural and Aesthetic (live)
• 10. Business Ready Pages (live)

How to use a design

1. Open the design folder and download demo.html.
2. Change the text, colors and links.
3. Upload it anywhere: GitHub Pages, Netlify, Vercel or your own server.

License

MIT. Use these designs in personal and commercial projects. A star on the repo helps more people find them.