Discover. Decode. Build.

CSS Crème started as a showcase of the best-designed sites on the web. This is that idea for 2026 — but we don't stop at "look how nice." We decode what makes a design work and hand you the building blocks: the palette, the type, the spacing, the code.

1

Discover

Curated collections of genuinely great work, by industry.

2

Decode

Breakdowns that reveal the palette, type, spacing and hierarchy.

3

Build

Copy the CSS variables, Tailwind config and patterns. Ship it.

Design breakdowns

the decode layer
SaaS · Pricing

Anatomy of a SaaS Pricing Page

Decode why great pricing pages convert — structure, hierarchy and the exact tokens to rebuild one.

Decode it →
SaaS · Dashboard

Anatomy of a Dashboard Shell

Sidebar, top bar and content grid — the layout system behind calm, data-dense apps.

Coming soon
Marketing · Hero

Anatomy of a Landing-Page Hero

The first screen: headline rhythm, social proof, and one unmistakable call to action.

Coming soon

Collections

curated, not crowdsourced
SaaS

Best SaaS Pricing Pages

Pricing pages that make the choice feel easy — clear tiers, honest value framing, and a confident recommended plan.

Browse →
SaaS

Best SaaS Landing Pages

Hero, social proof, and a single clear action — landing pages that convert without shouting.

Coming soon
AI

Best AI Product UI

How the best AI products handle chat, streaming, citations and trust.

Coming soon
Dashboards

Best Dashboard Designs

Dense data made calm — layout, hierarchy and color systems for dashboards.

Coming soon
Portfolio

Best Portfolio Sites

Type-led, confident personal sites that let the work speak.

Coming soon

Techniques to steal

inspiration you can build right now

Mesh gradient

Layered radial gradients blend into a soft, modern backdrop — no image needed.

Frosted

Glassmorphism

backdrop-filter blurs whatever sits behind a translucent panel.

Bento grid

Uneven, magazine-style tiles built with a few lines of CSS Grid.

Conic progress

A conic-gradient makes a pure-CSS progress ring.

Aa

Gradient text

background-clip: text pours a gradient straight into letterforms.

Soft UI

Twin light-and-dark shadows lift a surface off the page — gently.

Why decode and not just display?

Plenty of sites show you a wall of beautiful screenshots and stop there. The hard part was never finding something pretty, it was working out why it works and how to rebuild it. Every breakdown here ends with the parts you can actually use: a palette with CSS variables and Tailwind, a type pairing, a spacing scale, and the layout pattern. Discovery that ends in a build, not a dead end.