Designer tools,
built into your browser.
A focused toolkit that complements the effects library: design tokens, palettes, gradients, shadows and type scales; WCAG contrast checks; favicons, OG tags and email templates ready to ship — all without leaving Hoverlab.
Colour
9Token Generator
Build the CSS custom properties every block in the catalog is styled against — a full light and dark set in the shadcn convention. Colour maths in OKLCH, so one lightness scale works across every hue.
Palette Generator
Build a 5-color palette from a base color. Supports analogous, complementary, triadic, split-complementary, tetradic, monochromatic, and shades & tints schemes. Export as CSS variables, Tailwind config, or JSON — or send the base straight to the Token Generator.
Color Converter
Paste a color in any CSS format — hex, rgb(), hsl(), or oklch() — and get all four back, one copy button each. OKLCH math is done properly through linear-light OKLab, and out-of-gamut colors are clamped to sRGB and flagged instead of silently shifted.
Gradient Studio
Visually compose multi-stop linear and radial gradients. Drag stops, set angles, preview live, and copy as CSS with all the vendor prefixes you need.
Contrast Checker
WCAG 2.1 AA / AAA contrast checker with live preview at three text sizes. Get a pass/fail verdict plus the exact ratio and suggested fixes.
Mesh Gradient
The soft multi-colour wash every hero uses, as stacked CSS radial gradients rather than a 400KB PNG. Drag the blobs on the canvas; fades avoid the grey halo that `transparent` gives every one of them.
Colour Blindness Simulator
Which pairs in your palette become the same colour under each type of colour blindness — the failure a contrast checker cannot see. Reports collisions, not just recoloured swatches.
Live Palette Preview
Your palette on real components — a navbar, a hero, pricing, a dashboard, a footer — repainted as you drag, in both themes, with the contrast of every token pair checked while you do it. Not swatches next to lorem ipsum.
shadcn Theme Editor
Tune a shadcn/ui theme against real components in light and dark at once, then install it with one command — the export is a registry item the CLI reads, not a block of CSS to paste and hope.
Layout & spacing
6Grid Generator
Paint a page layout onto a grid and copy the CSS, with grid-template-areas checked for the rectangle rule as you go — the rule that silently voids the whole declaration when you break it. Explicit tracks or a responsive auto-fit wall.
Flexbox Playground
Every flex container and flex item property on one screen, against a live row you can add to and resize. Shows the three-part flex shorthand as the browser actually resolves it, including the basis-versus-width trap.
Unit Converter
Convert px ↔ rem ↔ em ↔ % ↔ vw ↔ vh in real time. Set the root font size, see every conversion at once, and copy whichever value you need.
Spacing Scale
Generate a whole spacing ladder from two decisions: a base unit and a progression — linear multiples or one of the same five modular ratios the typography tool uses. Every step is drawn at its actual size, so you see whether neighbours are distinguishable before you commit. Export as CSS variables, Tailwind spacing config, or JSON.
Border-radius & Squircle
Three modes: standard per-corner radius, true squircle via superellipse SVG path, and fluid min()-based responsive radius. Copy as CSS or SVG path data.
Section Divider
Waves, tilts, notches and arcs for the seam between two full-width bands, as scalable SVG. Emits currentColor so one snippet works in both themes, with the baseline gap and the antialiased hairline already handled.
Type & icons
2Icon Browser
Search the icon set every block already uses. Matches on keywords, not just names — "delete" finds Trash2. Click to copy the JSX.
Typography Playground
Pick from 11 curated font pairings — each with the reasoning written down — tune weight / line-height / letter-spacing / paragraph-spacing, and generate a modular type scale with one of 5 ratio presets. Emits next/font, which self-hosts.
Effects & motion
11Motion Presets
Enter, exit and attention animations, each shipping with its prefers-reduced-motion guard already written — and each one opening in the keyframes editor when the preset is only nearly right. Preview what a reduced-motion visitor actually sees.
Shadow Builder
Layer up to 8 box-shadows or text-shadows with independent x/y/blur/spread/color/opacity controls, or start from an elevation ramp, an inset well, or neumorphism computed from the surface colour — with the contrast caveat that style carries said out loud.
Clip-path, Blob & Shape Magic
Eleven classic polygon() shapes — chevrons, stars, arrows, speech bubbles — each with its own tunable parameters, plus a seeded organic blob generator with 3–12 control points and a randomness dial. Shape Magic merges draggable circles into one organic outline and leaves as a React component, SVG, PNG or CSS clip-path.
Easing Studio
Visual cubic-bezier editor. Drag the two control points on the curve, watch live translateX / scale / opacity previews, and pick from 14 named presets.
Glassmorphism Generator
Tune backdrop-blur + saturation + opacity + border + shadow + inner highlight for a frosted-glass card. Includes @supports fallback for older browsers.
Noise & Texture Lab
Film-grain and noise textures from the browser's own feTurbulence — a seamlessly tiling SVG data URI, previewed over a gradient and a card with the real blend mode. Texture Lab takes an image of yours instead and reduces it to a dither, a vector halftone or ASCII, entirely in the tab — nothing is uploaded.
Keyframes Editor
Author a multi-stop animation on a timeline instead of hand-typing percentages. Transform, opacity and blur per stop, playback controls, and the prefers-reduced-motion guard written for you — with the stricter guard when the animation loops.
Filter & Blend
Every filter function, backdrop-filter, and all sixteen blend modes on a subject drawn in CSS. Order is preserved because blur-then-brighten is a different picture from brighten-then-blur, and nothing is loaded from anywhere.
3D Transform
rotateX, rotateY, translateZ and the three parent properties that have to agree before any of it works — perspective, transform-style and backface-visibility. Includes the card flip everyone is really trying to build.
Scrollbar Styler
Both mechanisms from one set of controls — the standard scrollbar-width and scrollbar-color, plus the ::-webkit- pseudo-elements — in the order that makes them agree. Warns when the result gets too thin to grab.
Loader Generator
Spinners, dots, bars, pulses and progress rings as pure CSS, tuned on sliders and seeded from the loaders already in the catalog. Every one ships with its reduced-motion guard and the accessible status role written in.
Ship it
8Placeholders
Placeholder images and initial avatars as SVG data URIs. No third-party request, works offline, and the avatar colour is derived from the name so it is stable everywhere.
Favicon Generator
A letter or emoji into an SVG icon plus every PNG size that still matters. Rasterized in your browser from the same SVG — nothing is uploaded.
Meta & OG Builder
The tags that get you indexed and the card your link turns into, with length counters and a search-result preview. Emits Next.js Metadata, not stray meta tags.
Email Templates
Welcome, verify, reset and receipt — as nested tables with inline styles, because Outlook renders through Word. Text/plain version included.
Tailwind ↔ CSS
Translate a stylesheet into utilities or a className back into CSS, with a verdict on every line — exact, arbitrary value, arbitrary property, or why it could not be placed. Nothing is dropped in silence.
SVG Toolkit
The four SVG jobs that are always four different websites — optimise, convert to JSX or a data URI, generate a pattern, generate a wave — with one source shared between them, so the file you clean is the file you convert.
HTML to JSX
Paste markup and a stylesheet, take away a component — React, Vue, Svelte, styled-components or Tailwind. The same engine the catalog exports through, pointed at your own code, and it says what changed on the way through rather than leaving you to find out.
Code to Image
A snippet as a PNG for the places that will not take a code block — slides, social cards, release notes. Drawn on a canvas in your tab, so the preview is the file rather than a DOM screenshot that reflows under different fonts, and nothing is uploaded.
More tools coming soon. Have a request? and search the whole catalog.