UI Component Generators

"As Seen In" Strip

Build a muted "as seen in" row of press and media logos.

3D Tilt Card

Build a card that tilts in 3D toward the cursor with a glare.

404 Page Generator

Custom "page not found" HTML page with home link and search.

Accordion Builder

Build a smooth, accessible accordion from native details elements.

Age Gate Builder

Age verification overlay with yes/no or date-of-birth check.

Animated Dropdown

Build an accessible dropdown menu with a fade, slide or scale animation.

Announcement Bar

Build a dismissible top-of-page announcement bar with rotating messages.

Autocomplete UI

Type-ahead suggestion dropdown with ARIA combobox roles and keyboard support.

Back To Top Button

Build a scroll to top button with an optional reading progress ring.

Before / After Slider

Build a drag-to-compare before and after image slider.

Blog Card Builder

Article preview cards with image, tag, excerpt and author.

Bottom Sheet

Build a slide-up bottom sheet with actions and swipe to close.

Breadcrumb Generator

Build accessible breadcrumb navigation with optional BreadcrumbList schema.

Card Builder

Design a card component and copy its HTML and CSS.

Card Carousel

Build a scroll snap slider of clickable cards with arrows.

Checkbox Styler

Custom tick boxes and toggle switches from a real checkbox.

Client Logo Wall

Build a greyscale grid of customer logos that colour on hover.

Coming Soon Page Generator

Launch page with countdown timer and email signup, as one HTML file.

Comparison Card Builder

Side-by-side comparison cards with ticks, crosses and a highlighted column.

Contact Form Builder

Accessible contact forms with labelled fields and focus styles.

Cookie Banner

Build a lightweight cookie consent banner with Accept and Reject buttons.

Copy To Clipboard Button Generator

Copy to clipboard button for code blocks, inputs or fixed text.

Countdown Timer

Build a days, hours, minutes and seconds countdown to any date.

Coverflow Carousel

Build a 3D cover flow slider with tilted side slides.

CSS Button Generator

Design a button with hover, focus and disabled states.

CSS Generator

Build a formatted CSS rule from a selector and a form of properties.

New

CSS Input Generator

Style text boxes and textareas with focus and disabled states.

CSS Marquee Generator

Build an infinite scrolling headline marquee in pure CSS.

CSS Tooltip Generator

Pure CSS tooltips from a data attribute, with an arrow.

CTA Banner Builder

Build a call to action banner with a button and secondary link.

Custom Cursor

Build a dot and ring custom cursor that grows over links.

Custom Radio Button Builder

Accessible custom radio buttons as dots, cards or pill segments.

Dual Range Slider

Two-thumb min/max slider for price filters, no library needed.

Expandable Card

Collapsible card built on details/summary, no JavaScript.

FAQ Builder

Build an accessible FAQ section with optional FAQPage schema.

Feature Comparison Table

Build an accessible plan comparison table with ticks and a highlighted column.

Feature Grid Builder

Responsive icon-title-description feature grids for landing pages.

File Upload UI

Drag-and-drop file dropzone with a file list, native input underneath.

Flip Card

3D flip card with front and back faces, no JavaScript.

Floating Action Button

Build a floating action button with an optional speed dial menu.

Floating Label Form

Material-style floating labels in pure CSS with outlined, filled and underline variants.

Footer Generator

Build a responsive footer with link columns and a copyright line.

Form Progress Bar

Step indicators and progress bars for multi-step forms and checkouts.

Form Validation Generator

Inline form validation with custom messages, on blur or on submit.

Glass Button Builder

Frosted glass buttons with glow, lift and a shine sweep.

Hero Section Builder

Landing page hero sections with fluid headline and buttons.

Hover Card Builder

Card hover effects with timing controls, previewed live.

Hover Effect Builder

Build animated hover effects for buttons and links.

HTML Email Button Generator

Bulletproof email buttons with inline styles and an Outlook VML fallback.

Input Mask Generator

Auto-formatting inputs for phone, date, card and custom patterns.

Lightbox Builder

Build a dependency-free image lightbox with keyboard and swipe support.

Loading Screen Generator

Full-page preloader overlay that fades out when the page loads.

Logo Scroller

Build a seamless infinite logo marquee in pure CSS.

Magnetic Button

Build a button that is pulled toward the cursor as it approaches.

Maintenance Page Generator

Self-contained "down for maintenance" HTML page with your wording.

Mega Menu

Build an accessible full-width mega menu with link columns and a promo.

Mobile Menu

Build a responsive hamburger menu with an animated icon and panel.

Modal Builder

Build an accessible modal window with the native dialog element.

Multi-Step Form Builder

Wizard forms with step indicators, per-step validation and Back/Next buttons.

News Ticker

Build a scrolling breaking news headline bar with a pause button.

Newsletter Form Builder

Email signup forms with inline or stacked layouts and consent checkbox.

Off-Canvas Menu

Build an accessible slide-out side menu with an overlay and focus trap.

Pagination Builder

Build accessible page number links with ellipsis gaps and next and previous.

Password Strength Meter

Colour-coded password strength bar with a small scoring script.

Password Visibility Toggle

Show/hide password button with eye icon or text and correct ARIA state.

Popover Builder

Build a native HTML popover that opens next to its button.

Pricing Card Builder

Pricing plan cards with price, feature ticks, ribbon and CTA.

Pricing Table Builder

Build a responsive pricing table of plans with a featured one.

Pricing Toggle

Build a monthly and yearly price switch with no JavaScript.

Print Button Generator

Print this page button with print CSS for one section or all.

Product Card Builder

E-commerce product cards with price, rating, badge and button.

Progress Bar Generator

Generate a linear, striped, animated or circular CSS progress bar and copy the code.

Range Slider Builder

Custom-styled range input with filled track and live value.

Review Stars

Make accessible partial star ratings with one CSS variable.

Scrollbar Styler

Custom scrollbars for Firefox and WebKit in one rule set.

Scrollspy Navigation

Build a nav that highlights the section currently on screen.

Search Box Builder

Styled search bars with icon, button and focus ring, ready to paste.

Select Dropdown Builder

Custom-styled native select with your own arrow, no JavaScript.

Share Button Builder

Social share buttons for nine networks, with no tracking scripts.

Skeleton Loader Generator

CSS skeleton screen placeholders with shimmer or pulse animation.

Social Proof Popup

Build a corner toast that cycles recent-activity messages.

Stats Counter

Build a row of stats that count up when scrolled into view.

Sticky Header

Build a sticky header that hides, shrinks or stays as the page scrolls.

Tabs Builder

Build accessible tabs with arrow key support and three styles.

Team Grid Builder

Responsive team member grids with avatars, names and roles.

Testimonial Carousel

Build an accessible swipeable testimonial slider on CSS scroll snap.

Testimonial Grid

Build a masonry wall of testimonials with avatars and stars.

Timeline Builder

Build a vertical timeline with dates, headings and alternating sides.

Toast Notification Generator

Build an accessible toast message with auto-dismiss and a close button.

Trust Badge Strip

Build a row of trust badges with inline SVG icons.

Vertical Tabs Builder

Build accessible side tabs that turn into a row on phones.

Vertical Ticker

Build a ticker that rotates headlines one at a time, sliding up.

Video Hero Builder

Build a background video hero with overlay, headline, buttons and pause control.