Free UI Component Generator

The GoSnippets UI Component Generator produces copy-ready HTML and CSS for eight everyday components — buttons, inputs, cards, badges, toggles, tooltips, dropdowns, and modals — across four modern visual languages: Liquid Glass, Glassmorphism, Neumorphism, and Aurora Glass. Every snippet is self-contained: a single <style> block plus the markup, with a tiny inline <script> only when interactivity actually requires it (modal, dropdown).

Tokens are exposed as CSS custom properties so you can drop a snippet into an existing design system and override --gs-radius or --gs-tint from outside without editing the snippet itself.

Liquid Glass— multi-layer translucency inspired by Apple's visionOS and iOS 18. Backdrop blur, an inner highlight, a subtle gradient tint, and a shimmer that animates on hover. Best on vivid, high-contrast backdrops.

Glassmorphism — pure frosted glass with no gradient tinting. The cleanest, most neutral of the four. Pairs well with photography or busy hero gradients where the component should recede rather than dominate.

Neumorphism — soft extruded surfaces over a single-tone canvas (light #e0e5ec or dark #1e2a3a). All depth comes from paired shadows, not borders. Looks tactile but requires a quiet background — never use it over an image.

Aurora Glass — Liquid Glass with a violet/cyan glow shadow and a more saturated tint. The most premium of the four; reserve it for headline CTAs and key actions.

Every component is generated from the same token set, so styles stay consistent when you mix them on a page:

• Button — primary CTA with focus ring and active scale.
• Input — text field with a glow on :focus-visible.
• Card — title, body, and footer row with hover lift.
• Badge — status pill with a coloured dot and outer glow.
• Toggle — accessible label-wrapped checkbox switch.
• Tooltip — pure-CSS popover triggered by :hover and :focus-within.
• Dropdown — animated menu with single-instance JS controller (~30 lines).
• Modal — overlay dialog with backdrop blur, escape-to-close, and focus return.

Each generated snippet declares the following custom properties on :root:

• --gs-radius — the active corner radius (sm, md, lg, xl, full).
• --gs-radius-sm / -md / -lg — full radius scale, available for nested elements.
• --gs-tint — the optional colour wash; absent on Neumorphism.
• --gs-ease — the shared easing curve used by every transition.

Override any of them in your own stylesheet to retheme without touching the snippet body. Class names are namespaced under .gs- so they won't collide with Tailwind, Bootstrap, or your own utilities.

• Every interactive element has a visible :focus-visible ring.
• Toggles are real <label>-wrapped checkboxes — they work with screen readers and keyboard out of the box.
• Modals declare role="dialog" and aria-modal="true", return focus to the trigger on close, and dismiss on Escape.
• Dropdowns wire aria-haspopup and aria-expanded automatically.
• Tooltips show on focus as well as hover, so keyboard users get the same affordance.
• Decorative SVG icons use aria-hidden; meaningful actions have explicit aria-labels.

Snippets contain only the CSS they need. There is no runtime framework, no Tailwind layer to parse, no SVG icon font, no web-component polyfill. The largest snippet (modal with overlay and focus management) ships in under 2 KB minified.

Animations use transform and opacityonly, so they stay on the compositor and don't trigger layout. The generator also emits a @media (prefers-reduced-motion) block when motion is non-trivial.

• Marketing hero, dashboard cards, pricing tiles → Liquid Glass over a colourful gradient.
• Photography overlays, blurred-image hero sections → Glassmorphism (lets the photo speak).
• Settings panels, productivity apps, calculator UIs → Neumorphism on a quiet canvas.
• Premium upgrade prompts, launch announcements → Aurora Glass for headline CTAs.

Mix freely — the token system keeps a Liquid Glass card and a Glassmorphism input visually consistent on the same page so long as --gs-radius agrees.