3D Effects
3D Keycaps and Push Buttons
Buttons that look and behave like physical keys, in four variants.
355 sets, each in CSS, Bootstrap 5 and Tailwind 4
Every set here works without a line of JavaScript in its plain CSS version: state comes from native elements such as details, dialog, checkboxes, radio buttons and :has(), and motion from transitions that switch off under prefers-reduced-motion.
Each set also comes in Bootstrap 5 and Tailwind 4, with a live demo and copyable code. Free for personal and commercial use.
3D Effects
3D Cubes and Boxes
Solid shapes built from HTML and CSS, in three variants. The product box is a tea packet with six printed faces, shown…
3D Effects
3D Text Effects
Four ways to give a headline depth. Layered depth stacks hard-edged text-shadows in bands of amber and teal under a serif italic,…
3D Effects
Neon 3D Effects
Neon 3D for dark interfaces, in three variants. The synthwave stage is an event hero with a striped sunset sun, a glowing…
3D Effects
Modern CSS 3D Effects
Three 3D effects that newer CSS features make possible without JavaScript.
Accordions
Basic Accordions
Three plain accordion treatments that fit most pages. Bordered cards give each question its own white card with an 11px radius and…
Accordions
Accordion Open/Close Markers
Four ways to show whether an accordion panel is open, all on the same bordered-card layout.
Accordions
FAQ Accordion Layouts
Three page layouts for a frequently asked questions section, each built from the same bordered accordion cards.
Accordions
Exclusive Accordion
An accordion where opening one panel closes the others, shown next to an independent accordion so the difference is easy to try.
Accordions
Rich Accordion Panels
Accordions for content that is more than a line of text. Icon and subtitle puts a tinted icon tile and a two-line…
Accordions
Nested Accordion and Sidebar
Two accordion patterns for documentation and navigation. Nested places a second accordion inside an open panel: the inner items use a lighter…
Accordions
Dark Accordions
Three accordion treatments for dark interfaces such as dashboards, developer tools and dark-mode sites, with a cyan accent.
Accordions
Animated Accordions
Three ways to add motion to an accordion without a JavaScript animation library.
Alerts
Docs Callouts
Callouts for documentation, shown inside a page of fictional docs for a static site builder called Quarry.
Alerts
Modern CSS Alerts and Toasts
Three patterns that usually need JavaScript, done with current HTML and CSS instead.
CSS Arrows
CSS Arrow Shapes
Four ways to draw an arrow with CSS alone, each shown pointing up, right, down and left, plus a row that shows…
CSS Arrows
Scroll Down Arrow Indicators
Four animated scroll-down indicators, each placed at the foot of a hero panel the way they are used on landing pages.
CSS Arrows
Arrow Buttons and Links
Arrow links and buttons for the places arrows usually appear in a product: read more links, article navigation, carousels and calls to…
CSS Arrows
Process Flow Arrows
Arrows that show movement from one stage to the next, for dashboards, how it works sections and case studies.
CSS Arrows
Hand-Drawn SVG Arrows
Curved, hand-drawn SVG arrows that draw themselves in, for annotating a pricing table, a product screenshot or a feature you want people…
CSS Arrows
Dark Arrow Designs
Arrows for dark dashboards and apps, where thin grey arrows from a light theme tend to vanish.
CSS Arrows
Modern CSS Arrows
Three arrows built with newer CSS that used to need SVG or JavaScript, each with a fallback.
Background Patterns
Geometric Background Patterns
Six geometric background patterns drawn entirely with CSS gradients, with no images and no SVG.
Background Patterns
Subtle UI Background Textures
Six quiet textures for app shells, landing pages and editors.
Background Patterns
Mesh Gradient Backgrounds
Six soft gradient backgrounds of the kind design tools call mesh gradients, built with layered CSS gradients.
Background Patterns
SVG Pattern Backgrounds
Six SVG pattern backgrounds drawn for this set and inlined as data URIs.
Background Patterns
Animated Backgrounds
Four animated backgrounds that move only transform and opacity, so the browser can hand them to the compositor instead of repainting the…
Background Patterns
Patterned Section Backgrounds
Four full page sections that show how to put real content on a pattern and keep it readable.
Background Patterns
Dark Background Patterns
Six patterns tuned for dark interfaces, where a light-theme pattern either vanishes or turns into noise.
Background Patterns
Modern CSS Background Patterns
Six tiles that use newer CSS for jobs that used to need JavaScript or several hand-picked colours.
Badges & Avatars
Status and Count Badges
The badges most interfaces need first, each shown with realistic content.
Badges & Avatars
Initials and Icon Avatars
Avatars that need no photos. Initials avatars come in five sizes from 24 to 72 pixels, as circles and as rounded squares,…
Badges & Avatars
Avatar Groups and Stacks
Ways to show a group of people in a small space. The overlapping stack shows four members of a project team and…
Badges & Avatars
Verified and Role Badges
Badges that say something about a person or an account. A scalloped verified seal sits after a name in blue for a…
Badges & Avatars
Feature Labels and Step Badges
Labels for products and features, and badges that show progress.
Badges & Avatars
Dark Badges and Avatars
Badges and avatars designed for dark interfaces, where light-theme tints turn muddy.
Badges & Avatars
Modern CSS Badges and Avatars
Three patterns that usually need JavaScript, done with current CSS.
Breadcrumbs
Classic Breadcrumb Separators
The four separator styles most sites use, each on a white bar: a thin slash, a chevron, an arrow with indigo links,…
Breadcrumbs
Arrow Step Breadcrumbs
Three breadcrumbs where every level is a shape rather than a word between separators.
Breadcrumbs
Pill and Tag Breadcrumbs
Breadcrumbs made of chips, for interfaces that already use rounded controls.
Breadcrumbs
Breadcrumbs with Icons
Three ways to add icons without hurting the text trail. Home icon replaces the first level with a house glyph, the most…
Breadcrumbs
Collapsing Breadcrumbs
Three answers to the long path problem. Collapsed middle keeps the first level, the parent and the current page, and folds the…
Breadcrumbs
Page Header Breadcrumbs
Breadcrumbs as part of a complete page header, which is where most of them live.
Breadcrumbs
Dark Breadcrumbs
Breadcrumbs tuned for dark interfaces, where a light theme trail turns grey on grey.
Breadcrumbs
Modern CSS Breadcrumbs
Breadcrumb behaviour that usually needs a dropdown script, done with current CSS and HTML.
Buttons
Gradient Buttons
Six call-to-action buttons built on CSS gradients. Four are solid two-colour fills: indigo to purple, rose to burnt orange, teal to emerald…
Buttons
3D Pressable Buttons
Chunky buttons that look like physical keys. A solid, unblurred box-shadow in a darker shade of the face colour draws a 6…
Buttons
Ghost Outline Buttons
Five transparent outline buttons for dark backgrounds, each with a different way of filling in on hover.
Buttons
Neon Glow Buttons
Uppercase outline buttons for dark, gaming and nightlife designs, styled like neon tubes.
Buttons
Neobrutalist Buttons
Flat, loud buttons in the neobrutalist style: a 3 pixel black border, heavy 900 weight labels, bright flat fills and a hard…
Buttons
Pill Buttons
Five fully rounded buttons for modern product interfaces. Solid pill is indigo with a darker hover and a tinted shadow.
Buttons
Segmented Button Controls
Three segmented controls for choosing one option from a short list: a light Billing period control with Monthly, Yearly and Lifetime, a…
Buttons
Split Action Buttons
Two split buttons that pair a main action with a short list of related ones.
Buttons
Button Size Scale
A five-step button size scale, extra small, small, default, large and extra large, plus square icon-only buttons in four matching sizes and…
Buttons
Button States Reference
One primary button drawn in each of its seven states, side by side with a caption: rest, hover, focus visible, active, disabled,…
Buttons
Animated Border Buttons
Four dark buttons whose border is the effect. Conic border rotates an indigo, cyan and rose conic gradient behind a 2 pixel…
Buttons
Text and Link Buttons
Five buttons with no fill, where the text and its underline do the work.
Buttons
Marketing CTA Buttons
Call-to-action buttons for landing and pricing pages, in the combinations they are usually used.
Buttons
Frosted Glass Buttons
Four frosted glass buttons shown over a colourful ground of amber, pink and blue light on deep navy.
Buttons
Expanding Icon Buttons
Four round 48 pixel icon buttons that widen into pills to reveal their label on hover or keyboard focus: New project in…
Calendars
Week Schedule Calendar
A Monday-to-Friday time grid for team schedules, class timetables and room planners.
Calendars
Agenda List Calendar
A vertical agenda for upcoming events, suited to newsletters, editorial calendars, sidebars and mobile screens where a month grid would be too…
Calendars
Activity Heatmap Calendar
A contribution-style heatmap: a year of days laid out as 52 week columns of seven cells, each shaded in one of five…
Calendars
Quarter View Calendar
Three months side by side, October to December 2026, with today ringed and a closure range from 24 November to 2 December…
Calendars
Resource Scheduling Calendar
A resource view for one day: four meeting rooms down the side, the hours from 09:00 to 19:00 across the top and…
Calendars
Calendar with Day Detail Panel
A month grid for September 2026 next to a detail panel. Three days have events and are outlined as selectable; choosing one…
Calendars
Compact Dashboard Calendar
A 290 pixel calendar card for dashboards and sidebars: a month header with previous and next buttons, a small month grid with…
Calendars
Weekly Availability Picker
A weekly availability grid where people tick the hours they are free: seven days across, six one-hour slots down from 09:00, a…
Calendars
Recurring Event Preview
A recurrence picker with a live preview. Three options, every weekday, every Tuesday and monthly on the 14th, sit beside a September…
Calendars
Mobile Agenda List
A phone-sized agenda: a sticky title bar with the month and event count, then one sticky heading per day and the events…
Cards
Profile Cards with Stats
Two team or creator profile cards: a round gradient avatar with the person's initials inside a thin ring, their name and role,…
Cards
Dark Blog Post Cards
Blog post cards for a dark page: a gradient cover with a frosted category chip in the corner, the post title, a…
Cards
Three-Tier Pricing Cards
A three-plan pricing row with Starter, Pro and Team cards. Each card has the plan name, a large monthly price, a one-line…
Cards
3D Flip Cards
Two feature cards that turn over in 3D. The front is a gradient panel with an emoji icon, a heading, a short…
Cards
Glassmorphism Usage Cards
Frosted-glass cards for account usage: a storage card at 72 percent and a bandwidth card at 41 percent.
Cards
KPI Stat Cards with Sparklines
Three dashboard KPI cards: Revenue, Active users and Conversion rate.
Cards
Testimonial Cards with Ratings
Customer quote cards on a warm cream page. Each card has a five-star rating, the quotation, and a footer with a gradient…
Cards
Hover Reveal Overlay Cards
Tall story cards with full-bleed artwork and text laid over a dark gradient veil at the bottom: a frosted category tag, the…
Cards
Horizontal Media Cards
Wide cards with a media panel on the left and text on the right, stacked in a column: a podcast episode and…
Cards
Event Card with Date Block
An event listing card for workshops, meetups and webinars. A calendar-style date block with an indigo month strip sits beside a type…
Cards
Notification Cards
Three notification cards in the info, success and warning severities, stacked the way they would sit in a notification panel.
Cards
File Upload Status Cards
Three compact file cards that cover the life of an upload: in progress, uploaded and failed.
Cards
Course Progress Card
A single online-course card for a learner dashboard. A gradient cover carries an Intermediate level pill, and below it sit the course…
Cards
Job Listing Card
A job board card for one opening: a company logo tile, the job title and company line, a Save bookmark button, a…
Cards
Weather Forecast Card
A weather widget card on a deep blue gradient with a soft light spot in the top corner.
Cards
Invoice Receipt Card
A receipt card for billing pages and order confirmations. The header shows the invoice number, the issue date and the customer, with…
Cards
Expandable Details Cards
Two cards that expand in place to show more detail, one open and one closed, as used for plan comparisons, FAQs and…
Cards
Skeleton Loading Card
A blog post card shown twice: once as a skeleton while it loads and once with its content.
Cards
Bento Grid Cards
A bento grid of five cards of different sizes for landing pages, product updates and dashboards.
Carousels
Logo Marquees
Endless scrolling rows built with CSS alone. Single row with faded edges is the classic trusted-by strip: eight customer logos, each a…
Shopping Carts
CSS-only Checkout with :has()
A checkout step for a ceramics studio that does with modern CSS what checkout templates usually do with JavaScript.
Checkboxes & Radios
Basic Checkboxes
Four custom checkbox shapes that cover most forms: a square box that draws its tick, a rounded square, a circular checkbox and…
Checkboxes & Radios
Checkbox Cards
Checkboxes where the whole card is the click target. The set has bordered option cards with a title and a one-line description,…
Checkboxes & Radios
Checkbox Lists
Layouts for longer lists of checkboxes. A bordered list stacks options as full-width rows divided by hairlines, with a hover tint, for…
Checkboxes & Radios
Basic Radio Buttons
Four radio button treatments for one-of-many choices. The classic dot keeps a light ring and scales a blue dot into it when…
Checkboxes & Radios
Radio Button Cards
One-of-many choices presented as cards. The plan picker shows three pricing cards with a name, a price and a line of detail;…
Checkboxes & Radios
Dark Checkboxes & Radios
Checkboxes and radio buttons built for dark surfaces, where a light-theme control loses its border and reads as a smudge.
Checkboxes & Radios
Custom Radio & Checkbox Marks
Choice controls that carry some character. A heart toggle is a checkbox whose emoji heart is greyed out until the item is…
Claymorphism
Claymorphism Buttons & Toggles
The puffy controls a clay interface is built from. Pill buttons come in peach, mint, sky, lemon, lilac, plain and an accent…
Claymorphism
Claymorphism Cards
Four kinds of card moulded from the same clay. Stat cards are coloured slabs in peach, lemon, mint and sky, each with…
Claymorphism
Claymorphism Kids Learning App
A complete screen for a children's learning app, built only from the kit.
Coming Soon Pages
Maintenance Page with Status
A scheduled maintenance page that answers the three questions users arrive with: what is happening, when it will be back, and what…
Coming Soon Pages
Under Construction Page
A bold under construction page on safety yellow with hazard tape along the top and bottom edges and a faint blueprint grid.
Dark UI Kit
Dark UI Buttons & Toggles
The buttons and toggles of the uiCookies dark UI kit. Buttons come as a primary accent button, a secondary button on the…
Dark UI Kit
Dark UI Cards
Cards from the uiCookies dark UI kit, built to show how elevation works without shadows.
Dark UI Kit
Dark UI Navigation
Navigation for the uiCookies dark UI kit. The navbar has a brand mark, main links with the current page marked by aria-current…
Dark UI Kit
Dark UI Light Theme Variant
The set that proves the system: the same components rendered twice, side by side, once under data-theme="dark" and once under data-theme="light", plus
Dashboard Widgets
KPI Stat Widgets
Three ways to show the numbers a dashboard opens with. KPI cards with sparklines is a row of four cards for net…
Dashboard Widgets
Goal & Progress Widgets
Widgets for tracking a number against a target. Radial progress rings shows three cards with an SVG ring each: a quarterly sales…
Dashboard Widgets
Leaderboard & Table Widgets
Compact tables and ranked lists for a dashboard. The recent orders table lists five orders with order number, customer, date, right-aligned total…
Dashboard Widgets
Dark Dashboard Widgets
An ops dashboard on a near-black ground, where light-theme greys and blues lose contrast.
Dashboard Widgets
Modern CSS Dashboard Widgets
Three widget patterns that usually need JavaScript or extra breakpoints, done in CSS.
Dropdown Menus
Modern CSS Dropdown Menus
Dropdowns with no JavaScript at all, built on the popover attribute and CSS anchor positioning.
Feature Sections
Icon Grid Feature Sections
Three feature sections built around a grid of icons, each with a short heading and one sentence of copy.
Feature Sections
Alternating Feature Rows
A feature section with a centred heading followed by three rows that alternate copy and picture from side to side, the classic…
Feature Sections
Bento Grid Feature Sections
Two bento grid feature sections, where tiles of different sizes give each feature the space it needs.
Feature Sections
How It Works Sections
Three sections that explain how a product works and why it beats the alternative.
Feature Sections
Call to Action Bands
Five call to action bands for the end of a landing page or the gap between feature sections.
Feature Sections
Logo Cloud and Social Proof
Three social proof sections that show who uses a product and what it did for them.
Feature Sections
Dark Feature Sections
Two feature sections for dark interfaces and developer products.
Feature Sections
Modern CSS Feature Sections
Four feature sections that do with modern CSS what usually takes JavaScript or fixed heights.
File Uploads
CSS-only File Upload States
File upload states that usually need JavaScript, done with HTML validation and modern selectors.
Footers
Four-Column Footer
A classic white site footer in two rows. The top row holds the brand, a gradient logo mark with a two-line blurb,…
Footers
Minimal One-Line Footer
The smallest useful footer: a single row with the copyright and a note on the left and four short links on the…
Footers
Dark SaaS Footer
A near-black footer for software products. On the left sits the brand with a one-line pitch and a green pill link reading…
Footers
Call-to-Action Footer
A conversion footer that ends the page with one last push. A dark panel with a rounded top holds a huge two-tone…
Footers
Sitemap Mega Footer
A full sitemap footer for online shops and larger sites. Five equal columns, Shop, Help, Company, Account and Resources, each hold five…
Footers
Gradient Studio Footer
A bold footer for creative studios and agencies. A diagonal gradient runs from indigo through violet to pink, with a soft blurred…
Footers
App Download Footer
A footer that sends visitors to your mobile app. The left side has a short pitch, Take the board with you, a…
Footers
Contact Footer with Hours
A contact-led footer for restaurants, shops, studios and any place people visit in person.
Footers
Shop Footer with Trust Row
A footer for an online shop that does more than list links. It opens with a tinted trust row of four promises,…
Footers
Locale Switcher Footer
A dark footer for a product sold in several countries. The top row pairs the brand and a one-line description with three…
Footers
Wave Divider Footer
A deep violet footer that starts with a soft wave instead of a straight edge.
Footers
Neobrutalist Footer
A loud yellow footer in the neobrutalist style: thick black borders, square corners and solid offset shadows with no blur anywhere.
Footers
Big-Type Portfolio Footer
A black footer for a studio or freelancer where the email address is the design.
Footers
Status and Changelog Footer
A dark footer for a developer product, the kind you see on API, CLI and hosting sites.
Footers
Compliance Footer
A light footer for a bank, lender, insurer or any regulated business that has to show small print on every page.
Footers
Two-Tone Split Footer
A footer in two bands, so the newsletter signup is not squeezed into a column.
Footers
Scrolling Marquee Footer
A dark footer topped by a band of short slogans that scrolls sideways without end, separated by small indigo diamonds.
Footers
Local Directory Footer
A wide, link-heavy footer for a local business directory, marketplace or listings site.
Form Wizards
CSS-only Form Wizards
Two multi-step forms that run without any JavaScript. Accordion steps, completion from :has(), books a lakeside cabin in three steps built from…
Forms
Text Input Styles
Four treatments for a single-line text field, each with a visible label above the input.
Forms
Floating Label Inputs
Three fields where the label starts inside the input, like a placeholder, and rises to the top edge when the field is…
Forms
Input Groups
Fields joined to something else, with the borders merged so each group reads as one control.
Forms
Form Layouts
Three complete forms rather than single fields. The contact form sits in a white card with a heading and a response-time note;…
Forms
Dark Form Inputs
Form fields tuned for dark interfaces such as developer dashboards and admin panels, with a cyan accent.
Galleries
Responsive Image Grid Galleries
Three photo grids for the most common gallery job: showing a set of pictures in tidy rows.
Galleries
Masonry Image Galleries
Two masonry layouts for photos that do not share one shape. Column masonry puts twelve forest and coast photographs of different heights…
Galleries
No-JS Thumbnail Image Viewers
Two image viewers that switch the main photo from a row of thumbnails without any JavaScript.
Galleries
Image Hover Effect Galleries
Six photo tiles from a garden and pottery studio, each showing one hover effect you can lift into any gallery.
Galleries
Dark Photo Portfolio Galleries
Two dark layouts for a photographer's portfolio, where a black ground lets night and landscape photos glow.
Galleries
Filterable CSS Image Galleries
Two gallery features that usually need JavaScript, done in CSS.
Glassmorphism
Glassmorphism Buttons & Toggles
The buttons and toggles of the uiCookies glassmorphism UI kit, shown on the kit's signature scene of gradient orbs.
Glassmorphism
Glassmorphism Form Controls
Form controls for the uiCookies glassmorphism UI kit, plus a complete glass login card.
Glassmorphism
Glassmorphism Cards
Four glass cards from the uiCookies glassmorphism UI kit, laid out side by side so you can see one design language across…
Glassmorphism
Glassmorphism Navigation
Navigation components for the uiCookies glassmorphism UI kit: a glass navbar, a tab bar, a workspace sidebar, a breadcrumb and pagination.
Glassmorphism
Glassmorphism Widgets
Media and dashboard widgets from the uiCookies glassmorphism UI kit: a mini music player, a weather widget, a mini calendar and a…
Glassmorphism
Dark Glassmorphism Components
The core components of the uiCookies glassmorphism UI kit on the dark scene: buttons, icon buttons and switches, form controls, a stat…
Glassmorphism
Glassmorphism Dashboard
A complete glass dashboard built from the components of the uiCookies glassmorphism UI kit, with a switch that turns the whole scene…
Hero Sections
Centered SaaS Hero Sections
Two centred hero sections for software products, each with a minimal nav bar, an announcement pill, a headline, a line of subcopy,…
Hero Sections
Split Hero Sections
Three two-column heroes that pair the copy with something on the other side.
Hero Sections
Email Capture Hero Sections
Two heroes built around an email field, for waitlists, early access and newsletters.
Hero Sections
Image Background Hero Sections
Three heroes with a full-bleed photograph behind the copy, each using a different way to keep the text readable.
Hero Sections
App Download Hero Sections
Two heroes for mobile apps, with phones drawn in CSS and no device images or store logos.
Hero Sections
Editorial Agency Hero Sections
Two heroes for studios and agencies where the type is the design.
Hero Sections
Dark Gradient Hero Sections
Two dark heroes that get their depth from layered gradients rather than images.
Hero Sections
Modern CSS Hero Sections
Two heroes that use newer CSS for things that usually need JavaScript or a pile of media queries.
Hover Effects
Image Zoom & Pan Hover Effects
Five ways to move a photo inside its frame on hover, shown on travel cards with a destination, a tour name and…
Hover Effects
Caption Reveal Hover Overlays
Four caption reveals for photo grids, shown on an architecture portfolio.
Hover Effects
Card Lift, Tilt & Glow Hovers
Four hover effects for content cards, shown on a set of workshop listings with a photo, date, title, price and a Book…
Hover Effects
Image Filter & Mask Hovers
Six image treatments that change on hover, shown on a photo magazine.
Hover Effects
Border Draw Hover Effects
Four line effects that draw a frame over a photo on hover, shown on an interior design portfolio with the project type…
Hover Effects
Dark Media Hover Effects
Three hover treatments for dark interfaces, where a drop shadow disappears and light and colour have to do the work.
Hover Effects
Modern CSS Hover Effects
Four hover effects that used to need JavaScript, written in current CSS.
Image Compare
CSS-Only Image Comparisons
Two before and after comparisons with no JavaScript at all, and an honest note on what each one can and cannot do.
Invoices
Modern Minimal Invoices
Two invoices in a clean modern style with a brand colour band and a tinted totals card.
Invoices
Invoice Email Templates
Two transactional emails for billing: Invoice email with a bulletproof pay button, and Payment received email with an outline button.
Invoices
Payment Receipts
A till receipt and a payment confirmation page. Narrow till receipt with a QR code is a 320 pixel café receipt in…
Invoices
Container Query Invoices
One invoice component shown twice, in a wide slot and in a 340 pixel side panel, to show it laying itself out…
Login Forms
Split-Screen Login Form
A full-page sign-in screen in two halves. On the left, an indigo-to-violet gradient panel carries the product name, a headline, a short…
Login Forms
Glassmorphism Login Form
A dark sign-in screen with a frosted glass card floating over three large blurred colour blobs in violet, sky blue and pink.
Login Forms
Social Login Form
A sign-in card that puts third-party accounts first. Three full-width outline buttons read Continue with Google, Continue with GitHub and Continue wit
Login Forms
Animated Gradient Border Login
A warm cream sign-in card wrapped in a 2 pixel border that cycles through orange, pink and violet.
Login Forms
Neobrutalist Login Form
A loud, flat sign-in card on a yellow dotted background: 3 pixel black borders, hard offset shadows with no blur, a violet…
Login Forms
Terminal-Style Login Form
A sign-in window styled like a command-line session. A title bar with red, amber and green dots reads auth@prod: ~/login; below it,…
Login Forms
Two-Factor Code Form
The second step of a sign-in that uses an authenticator app. A shield icon and a short line tell the person which…
Login Forms
Passkey Sign-In Form
A sign-in screen that leads with passkeys and keeps a password route one step away.
Login Forms
Enterprise SSO Login Form
A sign-in screen for team plans that authenticate through a company identity provider.
Login Forms
Session Lock Screen
A lock screen for a known account that has been idle, the kind shown by admin panels and internal tools after a…
Login Forms
Background Image Login Form
A login card floating over a full-bleed background, for brands that want a photograph or illustration on the sign-in page.
Maps
Dark Map Styles
Two maps for dark dashboards and apps, drawn as inline SVG. The edge network map shows the world in deep slate with…
Maps
Illustrated Route Maps
Three illustrated maps for travel, events and venues, built from inline SVG and CSS with no JavaScript.
Menus
Floating Dock Menu
A macOS-style dock of app shortcuts floating on a gradient. Seven rounded tiles (Home, Mail, Photos, Music, Code, Terminal and Trash) sit…
Menus
Progress Step Navigation
Two progress indicators for multi-step flows. The horizontal one is a four-step checkout (Basket, Delivery, Payment, Confirm) with numbered circles jo
Menus
Hover-Expanding Icon Rail
A dark 66px icon rail for app layouts that widens to 222px when a pointer rests on it or keyboard focus enters…
Multiselects
Customizable Select Menus
Rich dropdowns that are still a plain select element, built on the new customizable select.
Multiselects
CSS-only Multiselects
Multiselects that run on HTML and CSS alone, with no script at all.
Neobrutalism
Neobrutalism Buttons & Toggles
The controls a neobrutalist interface is built from: thick ink borders, hard offset shadows and flat lemon, pink, cyan, lime and blue…
Neobrutalism
Neobrutalism Creator Dashboard
A full creator dashboard assembled from the kit, with a light and dark switch that needs no JavaScript.
Neumorphism
Neumorphic Buttons & Switches
The controls a soft UI is built from, drawn so they stay readable.
Neumorphism
Neumorphic Cards
Four kinds of card in one soft style. Stat tiles show energy use, indoor temperature and solar output, each with an icon…
Neumorphism
Dark Neumorphism UI
The same kit on a dark surface, switched by one attribute. Put data-neu="dark" on any wrapper and the shared tokens change to…
Notifications
Notification Settings Matrix
A notification preferences form built as a real table: categories down the side, channels across the top, and a switch in every…
Notifications
Modern CSS Notifications
A bell panel and two toasts that work without any component JavaScript.
Pagination
Classic Numbered Pagination
The standard numbered pagination control in four weights. Plain shows bare page numbers with a filled blue current page and a light…
Pagination
Minimal Pagination Counters
Three compact alternatives for when a full row of page numbers is too much, either because there are hundreds of pages or…
Pagination
Pill Pagination
Fully rounded pagination for softer, friendlier interfaces. Filled pills gives every page a light grey circle and marks the current page with…
Pagination
Segmented Pagination Bar
Pagination that reads as one joined object rather than a row of separate buttons.
Pagination
Load More Buttons
The alternative to numbered pages for feeds, product grids and comment threads, where readers keep scrolling rather than jumping to a page.
Pagination
Dark Pagination
Numbered pagination built for dark interfaces such as dashboards, developer tools and media sites.
Pricing Tables
Highlighted Plan Pricing Cards
Two tiered pricing layouts for the classic pricing page, where one plan should stand out without shouting.
Pricing Tables
Billing Toggle Pricing Tables
Pricing tables with a billing period switch that changes every price on the page without any JavaScript.
Pricing Tables
Pricing Comparison Tables
Feature comparison tables for pricing pages, built as real HTML tables rather than a grid of divs, so screen readers can announce…
Pricing Tables
Single Plan Pricing Cards
Pricing cards for products that do not need tiers: one plan, a one-off licence or a price the buyer chooses.
Pricing Tables
Editorial Service Price Lists
Price lists for freelancers, studios and service businesses, set like a page from a magazine instead of a row of SaaS cards.
Pricing Tables
Dark Pricing Tables
Pricing for dark interfaces such as developer tools and hosting dashboards, with colours checked for contrast on a near-black ground.
Pricing Tables
Modern CSS Pricing Tables
Two pricing layouts that use newer CSS to do what usually takes JavaScript or fixed heights.
Product Cards
Colour and Size Swatch Cards
Product cards that let the shopper choose a variant before adding to the cart, each with a sale price.
Product Cards
Digital Product Cards
Cards for things that are never shipped: online courses, downloads and apps, where the details have to do the selling a product…
Product Cards
Modern CSS Product Cards
Product cards that do with CSS what is usually done with JavaScript.
Profile Cards
Classic Profile Cards
The profile card most sites need, in three layouts. Cover band with centred avatar has a gradient cover, a round initials avatar…
Profile Cards
Team Member Cards
Cards for an About or Team page, with illustrated SVG avatars drawn for this pack instead of stock photos.
Profile Cards
Dark Profile Cards
Profile cards for dark interfaces such as game, developer and music sites.
Profile Cards
Modern CSS Profile Cards
One profile card that lays itself out by the space it is given, shown in three slots.
Progress Bars
Basic Progress Bars
Four everyday progress bar layouts that cover most settings pages, course dashboards and task lists.
Progress Bars
Animated Progress Bars
Four progress bars with texture and motion, for work that takes a while.
Progress Bars
Stacked Progress Bars
Bars that show more than one value, or show a value as a count of blocks.
Progress Bars
Skill & Stat Progress Bars
Progress bars for profile pages, portfolios and dashboards. Skill bars on a profile puts a designer's name and role above four thin…
Progress Bars
Circular Progress Bars
Round progress indicators built two ways. Conic-gradient rings are three 92 pixel rings for storage, sprint tasks and ad budget: a conic-gradient…
Progress Bars
Upload Progress Bars
File transfer progress for upload forms, media libraries and download managers.
Progress Bars
Dark Progress Bars
Progress bars for dark dashboards, developer tools, games and night-mode apps, where a light-theme bar looks flat.
Progress Bars
Modern CSS Progress Bars
Three progress indicators that usually take JavaScript, done in CSS.
Retro UI
Retro Buttons & Toggles
The controls of a classic desktop operating system, rebuilt with real HTML elements.
Retro UI
Retro Forms & Login Dialog
Form controls in the classic desktop style and a log-on dialog that uses them.
Retro UI
Retro Cards & Windows
Cards drawn as classic desktop windows, each with a gradient title bar, labelled window controls and a bevelled frame.
Scroll Animations
Parallax Scrolling Layers
Three parallax techniques for a mountain hut website. The first is a CSS-only 3D scene inside its own scroll container: the container…
Scroll Animations
Dark Scroll Animations
A dark product page for a night sky camera with five scroll effects and no JavaScript.
Scroll Animations
Modern CSS Scroll Animations
Five scroll effects that usually need JavaScript, built with newer CSS, each with a line that names its baseline and a badge…
Search Bars
Classic Search Inputs
Five search inputs that cover most sites: a field with the magnifier on the left, a field with an icon submit button…
Search Bars
Hero Search Sections
Big search sections for the top of a landing page, where the search box is the main action.
Search Bars
Search Filter Bars
Toolbars that sit above a list of results and combine search with the controls that shape it.
Search Bars
Dark Search Bars
Search bars for dark interfaces, where a light-theme field becomes a grey smudge.
Sidebars
Classic App Sidebars
Three versions of the sidebar most dashboards start from, each shown in a small app frame.
Sidebars
Nested Sidebar Menus
Multi-level sidebar menus built on the native details and summary elements, so they open and close without any JavaScript.
Sidebars
Off-Canvas Sidebars
Sidebars that leave the screen on small devices and slide back in when asked.
Sidebars
Profile & Search Sidebars
Two fuller sidebars that carry more than links. The workspace sidebar starts with a switcher that opens a menu of three workspaces…
Sidebars
Dark Sidebars
Three sidebars for dark interfaces, where light-theme greys turn into mud and focus rings vanish.
Registration Forms
Split-screen Registration Forms
Two full-width registration layouts that put the form next to a panel explaining why people should sign up.
Registration Forms
Social and Email Sign-up Forms
Two sign-up cards that offer third-party accounts alongside an email form.
Registration Forms
Event Registration Forms
Two longer registration forms for events and courses, split into numbered sections.
Registration Forms
No-JS Validation Sign-up Forms
Two sign-up forms that do live validation, hints, progress and a ready state with CSS alone.
Social Media Icons
Classic Social Media Icons
The four social icon rows most websites need, each a list of links with inline SVG logos.
Social Media Icons
Mono and Outline Social Icons
Social icons for designs where full brand colour would be too loud.
Social Media Icons
Social Follow Buttons
Social buttons that say what they do and how many people already have.
Social Media Icons
Social Share Bars
Three share bars for articles and posts, wired to real share URLs.
Social Media Icons
Footer Social Media Links
Three footers built around social links, each for a different kind of site.
Social Media Icons
Social Icon Hover Effects
Four animated hover effects for social icons, all driven by CSS transitions.
Social Media Icons
Dark Social Media Icons
Social icons designed for near-black interfaces, where icons made for a light page lose contrast.
Speech Bubbles
Classic Speech Bubbles
Twelve speech bubbles covering every tail position people ask for.
Speech Bubbles
Chat Bubbles with Tails
One short conversation about picking up two bikes from a repair shop, styled two ways so you can compare the two tail…
Speech Bubbles
Comic & Thought Bubbles
A three-panel comic strip about a baker and a temperamental oven, with the three balloon types comics use.
Speech Bubbles
Callout & Annotation Bubbles
Three kinds of bubble that point at something specific. Hotspots on a product photo puts numbered dots on a picture of headphones…
Speech Bubbles
Testimonial Quote Bubbles
Testimonials drawn as speech bubbles, so the tail shows who is speaking.
Speech Bubbles
Dark Speech Bubbles
Speech bubbles for dark interfaces, where a white or pale grey bubble turns into a glaring block.
Speech Bubbles
Modern CSS Speech Bubbles
Three bubbles built with CSS features from 2024 and 2025, each behind @supports with a classic bubble as the fallback.
Star Ratings
Read-Only Star Rating Displays
Three ways to show a score that people can read but not change, each with fractional or half stars.
Star Ratings
Heart, Emoji and NPS Ratings
Rating scales for when stars are the wrong fit. Hearts rates a recipe from one to five hearts with a Clear button…
Star Ratings
Rating Distribution Summary
Rating summaries that sit at the top of a reviews section, without the review cards.
Star Ratings
Compact Star Ratings
Small ratings for places where space is short. Four sizes shows the same 4.6 rating with 1,208 reviews at 12, 16, 20…
Star Ratings
Dark Star Ratings
Star ratings tuned for dark interfaces such as streaming apps and media libraries.
Star Ratings
Modern CSS Star Ratings
Star ratings that use newer CSS for things that used to need tricks or JavaScript.
Stats Counters
Landing Page Stats Strips
Four stats strips for landing pages, the band of numbers that sits under a hero or between sections.
Stats Counters
Stats with Context
Numbers that carry their own context, for annual reviews, case studies and pages where a bare figure would not be trusted.
Stats Counters
CSS-Only Animated Counters
Number counters that animate with no JavaScript. Count on load runs three figures from 0 when the page opens.
Tables
Striped Table with Totals
A classic report table: a dark header row, zebra-striped body rows, a hover highlight and a totals row in the footer.
Tables
Dark Service Status Table
A dark admin panel for service health: a header bar with a title and a Refresh button, then a table of services…
Tables
Responsive Stacked Table
An orders table that stays a normal table on wide screens and turns every row into a labelled card below 620 pixels.
Tables
Sticky Header Table
A scrolling list of top pages whose header row stays pinned while the body scrolls under it.
Tables
Plan Comparison Table
A pricing comparison for three plans with the recommended one highlighted.
Tables
Invoice Line Items Table
A printable invoice sheet built around a line items table. The header shows the studio name and contact line on the left…
Tables
Minimal Hairline Table
The quietest table in the pack: no backgrounds, no header fill and no vertical lines, only a one pixel hairline above each…
Tables
Loading, Empty & Error Tables
The three states a data table shows before it has rows to display, in one set.
Tables
Frozen First Column Table
A wide revenue report, months down the side and six regions plus a total across the top, that scrolls in both directions…
Tables
Tables with Inline Charts
A traffic report by channel where three small charts sit inside the cells: a seven-bar sparkline for the recent trend, a horizontal…
Tables
Table Pagination Patterns
Four table footers, each suited to a different kind of data source, shown under the same two-row invoice table.
Tabs
CSS-Only Radio Tabs
Three tabs, HTML, CSS and Zero JS, in a pale teal segmented bar above a text panel, built without any JavaScript.
Tabs
Deep-Linkable URL Hash Tabs
Tabs whose state lives in the URL hash, so a reload keeps the open tab and a pasted link such as #pane-faq…
Tabs
Cross-Fade Animated Tabs
A segmented tab strip whose panels cross-fade and rise 8 pixels instead of cutting, with three steps named Write, Review and Ship.
Tabs
Thumbnail Media Tabs
A media viewer built as tabs: a large 16:10 frame with a caption and a row of four thumbnails underneath, where each…
Tabs
Dashboard Metric Tabs
Dashboard tabs where each tab is a small KPI card: a label, a large value and the change since last period, with…
Tabs
Loading and Empty State Tabs
One activity panel shown in the three states a real tab panel goes through: Loaded, with three rows of avatars, names and…
Tabs
Expanding Icon Rail Tabs
A dark vertical rail of icon tabs beside a content panel, for app shells, dashboards and settings screens where the navigation should…
Tabs
Wizard Step Tabs
Tabs drawn as a four-step setup wizard: Workspace and Invite team are complete and show a tick, Connect a repo is the…
Tabs
Filter Tabs with Counts
Pill-shaped filter tabs that carry a count, All, Open, In review and Archived, above a task list, so people can see how…
Tabs
Monthly and Yearly Pricing Tabs
A pricing section where a Monthly and Yearly switch swaps the whole plan grid, not just the numbers.
Testimonials
Testimonial Cards Grid
The testimonial section most product and service sites need: a centred heading over a grid of quote cards.
Testimonials
Featured Testimonial Section
One customer quote given the whole width of the page, for the moment in a landing page where a single strong endorsement…
Testimonials
Wall of Love Testimonials
A wall of love: lots of customer notes of very different lengths packed into a masonry layout, the way SaaS sites show…
Testimonials
Customer Review Summary
The ratings block from a product page: an average score, a breakdown of how many reviews gave each star rating, and the…
Testimonials
Video Case Study Testimonials
Customer stories that lead with a video and a number. The video testimonial cards put a 16:9 poster above each quote: CSS…
Testimonials
Dark Testimonial Section
Testimonials for a dark developer tool or SaaS site, where a light card on a black page looks out of place.
Testimonials
Modern CSS Testimonials
Two testimonial patterns that usually need JavaScript, done with modern CSS.
Timelines
Vertical Alternating Timeline
A company history laid out as an alternating vertical timeline: a 3px centre line, a blue dot for each event, and white…
Timelines
Minimal Release Notes Timeline
The quietest timeline in the pack: a 2px hairline on the left, a small ring for each entry and plain type.
Timelines
Dark Product Roadmap Timeline
A dark product roadmap that shows status as well as order. Five items run down a thin line: two are Shipped with…
Timelines
Activity Feed Timeline
An activity feed in a white panel, the kind found on a dashboard home or beside a project.
Timelines
Horizontal Steps Timeline
A horizontal step timeline for order progress: Cart, Shipping, Payment, Review and Done, each with a circle and a short caption.
Timelines
Scrolling History Timeline
A dark, horizontally scrolling timeline that tells a hundred-year studio history in six eras, from 1926 The letterpress years to 2026 One…
Timelines
Quarterly Roadmap Timeline
A year roadmap on a horizontal orange gradient road, with one card per quarter alternating above and below it: Q1 Foundation, Q2…
Timelines
Milestone Cards Timeline
Four onboarding milestones in a row: Connect your data, Pick a template, Invite the team and Automate reports.
Timelines
Gradient Glow Timeline
A dark vertical timeline with a gradient line that runs from cyan through indigo to pink, and a glowing ring marker for…
Timelines
Resume Experience Timeline
A two-column experience timeline for a CV or portfolio. Dates and location sit right-aligned in a narrow left column, 2024 — now…
Timelines
Horizontal Media Timeline
A horizontal timeline of image cards that scrolls sideways along a dated rail, built for a company history, a studio story or…
Timelines
Horizontal-to-Vertical Timeline
A progress timeline that runs horizontally on wide screens and turns into a vertical list below 700 pixels, from one piece of…
Timelines
Icon Process Timeline
A four-stage process strip with an icon tile, a number badge, a short heading and a sentence per stage, joined by small…
Timelines
Compact Inline Timelines
Three small progress trackers sized to sit inside a card, a list row or a table cell rather than take over a…
Timelines
Decade Axis Timeline
A horizontal timeline where events sit at their true distance along a dated axis instead of being spaced evenly, so a gap…
Timelines
Grouped Changelog Timeline
A changelog laid out as a timeline, with entries grouped under month headings that stick to the top of the viewport while…
Timelines
Scroll-Filled Spine Timeline
A vertical project timeline whose spine fills with an indigo to violet gradient as the timeline scrolls through the viewport, with no…
Timelines
Delivery Tracking Timeline
A parcel tracking card with a vertical timeline of delivery events, including a failed attempt, the live current step and the expected…
Timelines
Discussion Thread Timeline
An issue or ticket thread that mixes comments and lighter system events on a single spine, in the style of a code…
Timelines
Alternating Icon Timeline
A centred vertical timeline with cards alternating left and right of a gradient line and a rounded icon tile on the line…
Timelines
Audit Log Timeline
A dense audit log that fits one event per line, for admin panels and security pages where the list can run to…
To-Do Lists
Due Date Task Lists
Task lists that show when each task is due and how much it matters, without relying on colour.
To-Do Lists
CSS-only To-Do List with :has()
Two to-do lists that do in CSS what most to-do lists need JavaScript for.
Toggles
Classic Toggle Switches
Five switch shapes that cover most settings screens: a rounded pill, a square switch with 6px corners, a compact 38 by 22…
Toggles
Labelled Toggle Switches
Switches that say what state they are in, for places where a coloured track alone is not clear enough.
Toggles
Day and Night Toggle Switches
Theme switches for a light and dark mode setting. Sun to moon is a 76 pixel track with a blue sky: when…
Toggles
Soft Neumorphic Toggles
Switches drawn with paired light and dark shadows instead of borders, in the soft or neumorphic style, on a matched #e6e9ef grey…
Toggles
Dark Mode Toggle Switches
Switches designed for dark interfaces, where a switch made for a light theme loses its edges.
Toggles
Playful Toggle Switches
Switches with some personality, for games, onboarding flows, kids products and marketing pages.
Tree Views
Details Element Tree Views
Three tree views built only from nested lists and the details and summary elements, with no JavaScript at all.
Tree Views
Sidebar Navigation Trees
Two sidebar navigation trees shown next to the page they belong to.
Tree Views
Org Chart Tree Views
Two organisation charts drawn from nested lists. Company chart with collapsible branches shows a studio's chief executive, three chiefs and their repo
Tree Views
Modern CSS Tree Views
Three trees that do with CSS what many tree plugins do with JavaScript.