Free Web Tools
A growing set of fast, private utilities that run entirely in your browser — what you enter never leaves your device. Built by Patrick Bushe.
Color Form State Palette
Create input colors for default, focus, error, success, disabled, and placeholder states. Free and private in your browser, with nothing uploaded.
Open ToolColor Gradient Midpoint Finder
Compute the midpoint color between two hex colors and preview the three-stop gradient. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor Gradient Stop Editor
Edit color gradient stop in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolColor Heatmap Scale
Create a stepped heatmap color scale between low, midpoint, and high values. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor High Contrast Theme
Create high-contrast text, surface, accent, and focus colors for accessible themes. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor Hsl Hue Shifter
Shift a base color around the HSL hue wheel and generate related swatches. Everything runs locally in your browser with nothing uploaded and no account needed.
Open ToolColor Input Placeholder Contrast
Check placeholder text contrast against input background and border colors. A search field can test whether muted placeholder text is still legible.
Open ToolColor Link State Palette
Generate default, hover, active, visited, and focus colors for text links. Everything runs locally in your browser with nothing uploaded and no account needed.
Open ToolColor Luminance Curve Editor
Edit color luminance curve in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and no.
Open ToolColor Luminance Matcher
Use this free color luminance matcher in your browser to adjust one color lightness until it matches another relative luminance. Output stays private and local.
Open ToolColor Map Region Palette
Build region fill colors for maps with selected, hover, disabled, and default states. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor Marketing Section Palette
Generate hero, feature, CTA, and footer colors for marketing page sections. Everything runs locally in your browser with nothing uploaded and no account needed.
Open ToolColor Mix CSS
Generate color mix CSS in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolColor Name to Hex
Free CSS color name lookup: type a named color like tomato or slategray to get its exact hex and RGB values, in your browser.
Open ToolColor Nearest Tailwind Token
Find the nearest common Tailwind color token from a typed hex value with a live preview and one-click copy. Free and private — nothing is uploaded.
Open ToolColor Oklch Token Scale
Create an OKLCH-style token scale from a base hue, chroma, and lightness range. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor Pastel Palette
Build pastel color palettes with adjustable saturation, lightness, and token labels. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor Progress State Palette
Create progress colors for empty, partial, complete, warning, and error states. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor Ramp Contrast Audit
Check contrast ratios across a generated color ramp against light and dark text. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor Ramp Contrast Tester
Test color ramp contrast in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolColor Scale Token Generator
Generate color scale token in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and no.
Open ToolColor Semantic Token Mapper
Map color semantic token in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolColor Sidebar Nav Palette
Create sidebar navigation colors for background, active item, hover, and muted labels. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor State Contrast Matrix
Build a contrast matrix for default, hover, active, disabled, and focus states. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor Surface Elevation
Work with color surface elevation in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload.
Open ToolColor Surface Elevation Palette
Generate surface colors for elevation levels, cards, panels, modals, and popovers. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor Theme JSON
Preview a JSON-like theme color object as swatches and CSS custom properties. Free and private in your browser, with nothing uploaded and no account.
Open ToolColor Token Renamer
Rename color token in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolColor Tone Step Labeler
Label tone steps such as 50, 100, 500, and 900 for a custom color ramp with a live preview and one-click copy. Free and private — nothing is uploaded.
Open ToolColor UI State Palette
Generate color UI state palette in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload.
Open ToolColumnar Transposition Cipher
Free columnar transposition cipher reorders text by alphabetically ranked keyword columns. Runs in your browser; no uploads or accounts are used.
Open ToolComma-Separated to List
Free tool to split a comma-separated string into a list of lines, computed locally in your browser.
Open ToolComplete the Square Calculator
Free complete the square calculator with labeled inputs and an immediate result. It rewrites a monic quadratic in vertex form privately in your browser.
Open ToolCompound Interest Contributions
Calculate future value with starting balance, recurring contributions, return, and years. It runs entirely in your browser — no uploads or accounts.
Open ToolCompression Ratio Calculator
Free compression ratio calculator with an immediate result. It calculates engine compression from swept and clearance volume privately in your browser.
Open ToolConcrete Volume Calculator
Free concrete calculator: enter length, width, and depth to get the volume in cubic yards and metres plus an estimated bag count, in your browser.
Open ToolCone Volume Calculator
Free cone volume calculator: find the volume, slant height, and surface area of a cone, in your browser.
Open ToolConfetti Image Generator
Free confetti image generator: create a festive scattered confetti image, downloadable as PNG, in your browser.
Open ToolContent Refresh Checklist
Generate a content refresh checklist for stale posts, landing pages, and SEO pages.
Open ToolContrast Badge Checker
Free WCAG contrast checker: pick text and background colors to see the ratio and AA/AAA pass or fail badges, computed locally in your browser.
Open ToolCookie Banner Text Generator
Write short cookie consent banner copy with tone choices, accept, reject, and preferences labels, plus matching plain HTML output in your browser.
Open ToolCorrelation Calculator
Free Pearson correlation coefficient calculator: measure the linear relationship between two data sets, computed in your browser.
Open ToolCorrelation Matrix Calculator
Free correlation matrix calculator that treats each line as a variable and returns every Pearson pairwise coefficient privately in your browser.
Open ToolCORS Header Builder
Free CORS header builder that safely validates one static origin, methods, request headers, credentials, Vary, and preflight age in your browser.
Open ToolCost Per Unit Calculator
Free cost per unit calculator: find the price of a single unit from a total cost and quantity, in your browser.
Open ToolCoulomb’s Law Calculator
Free Coulomb’s law calculator: find the electrostatic force between two charges at a distance, computed in your browser.
Open ToolCount Occurrences
Free tool to count how many times a word or phrase appears in text, computed locally in your browser.
Open ToolCover Letter Generator
Create a template-based cover letter from contact details, hiring company, target role, three strengths, and a selected closing tone in your browser.
Open ToolCreator CPM Revenue Calculator
Estimate creator ad revenue from a view count and a CPM (revenue per thousand). Everything is calculated locally in your browser, with no uploads or sign-ups.
Open ToolCredit Utilization Calculator
Calculate credit utilization from card balances and limits, plus the payoff needed to hit a target. It runs locally in your browser with no uploads.
Open ToolCron Humanizer
Build cron humanizer in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCross Product Calculator
Free cross product calculator for two three-dimensional vectors, returning the perpendicular vector and its magnitude directly in your browser.
Open ToolCSS Accent Color
Generate accent-color rules for checkboxes, radios, ranges, and progress controls. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Accent Theme
Build CSS accent theme in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Accordion Component
Build CSS accordion component in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Alert Banner
Build CSS alert banner in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Anchor Positioning
Build CSS anchor positioning in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Animation Stagger Generator
Use this free CSS animation stagger generator in your browser to generate nth-child animation delays for a chosen item count. Output stays private and local.
Open ToolCSS Appearance Reset
Generate appearance reset CSS for buttons, selects, search inputs, and number fields. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Aspect Ratio Card Generator
Generate CSS aspect ratio card in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Auto Fit Auto Fill Comparer
Compare auto-fit and auto-fill behavior in the same CSS grid track formula. Everything runs locally in your browser with nothing uploaded and no account needed.
Open ToolCSS Autofill Styles
Build CSS autofill styles with a live preview and one-click copy. Everything runs locally in your browser with nothing uploaded and no account needed.
Open ToolCSS Avatar Stack
Work with CSS avatar stack in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and no.
Open ToolCSS Backdrop Blur Card
Create a glass card style with backdrop blur, border tint, and readable surface color. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Badge
Build CSS badge in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Border Radius Shape Generator
Generate CSS border radius shape in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload.
Open ToolCSS Button State
Build CSS button state in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Chat Layout
Build CSS chat layout in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Checkbox Toggle
Build CSS checkbox toggle in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Code Block Theme
Build CSS code block theme in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and no.
Open ToolCSS Color Picker Input
Generate CSS color picker input in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload.
Open ToolCSS Command Palette
Generate CSS command palette in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Comparison Slider
Build CSS comparison slider in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and no.
Open ToolCSS Contain Property
Preview contain layout, paint, size, and content values for isolated components. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Container Query Generator
Use this free CSS container query generator in your browser to build named inline-size container query CSS. Output stays private and local. No upload is needed.
Open ToolCSS Container Style Query
Build CSS container style query in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload.
Open ToolCSS Container Units
Preview cqw, cqh, cqi, and cqb units inside a resizable component container. A card title can scale from the card width instead of the full viewport.
Open ToolCSS Copy Code Button
Build CSS copy code button in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and no.
Open ToolCSS Corner Cut Generator
Generate CSS corner cut in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Currentcolor Preview
Preview CSS currentcolor in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Dashboard Grid
Build CSS dashboard grid in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Device Frame
Build CSS device frame in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Diagonal Section Generator
Generate CSS diagonal section in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Dialog Backdrop
Generates CSS for dialog::backdrop, the pseudo-element browsers paint behind a native HTML dialog opened modally. Free and private — nothing is uploaded.
Open ToolCSS Email Button
Build CSS email button in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Email Card
Build CSS email card in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Email Layout Snippet
Build CSS email layout snippet in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Fade Slide Keyframes
Build CSS fade slide keyframes in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Feature Comparison Table
Build CSS feature comparison table in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload.
Open ToolCSS File List
Build CSS file list in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Floating Label Input
Build CSS floating label input in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Fluid Spacing Clamp Generator
Generate CSS fluid spacing clamp in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload.
Open ToolCSS Focus Ring
Build CSS focus ring in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Focus Within
Preview :focus-within styles for form groups, search boxes, and composite controls. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Font Palette
Generate font-palette snippets for color fonts and emoji-style display type. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Font Shorthand Builder
Use this free CSS font shorthand builder in your browser to assemble font CSS from style, weight, size, line height, and family. Output stays private and local.
Open ToolCSS Font Size Adjust
Generate font-size-adjust CSS for fallback fonts with different x-heights. Everything runs locally in your browser with nothing uploaded and no account needed.
Open ToolCSS Font Variant Numeric
Build font-variant-numeric settings for tabular, oldstyle, and lining numbers. A metrics table can use tabular nums so changing prices align cleanly.
Open ToolCSS Form Fieldset
Build CSS form fieldset in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Form Grid
Build CSS form grid in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Gradient Border Card Generator
Generate CSS gradient border card in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload.
Open ToolCSS Gradient Generator
Pick two colors and an angle, preview the gradient, and copy CSS.
Open ToolCSS Gradient Noise Card
Generate CSS gradient noise card in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload.
Open ToolCSS Gradient Ring Button
Generate CSS gradient ring button in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload.
Open ToolCSS Grid Template Area
Build named CSS grid areas from header, sidebar, main, and footer controls. Everything runs locally in your browser with nothing uploaded and no account needed.
Open ToolCSS Halftone Background
Build CSS halftone background in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Has Selector
Build CSS has selector in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Hero Background
Build CSS hero background in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Holy Grail Layout
Build CSS holy grail layout in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and no.
Open ToolCSS Hover Glow Generator
Generate CSS hover glow in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Hyphenation
Preview hyphens, overflow-wrap, and language-aware text wrapping. A narrow article column can hyphenate long English words instead of forcing overflow.
Open ToolCSS Inbox List
Build CSS inbox list in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Initial Letter
Preview CSS initial-letter styles for magazine-style opening paragraphs. An article intro can use a two-line drop initial without adding extra markup.
Open ToolCSS Inset Position
Build absolute or fixed positioning snippets using inset, inset-inline, and inset-block. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Is Where Selector Comparer
Compare :is and :where selectors and their specificity impact. A reset can group button and input selectors with :where so it stays easy to override.
Open ToolCSS Isometric Grid
Build CSS isometric grid in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Kanban Board
Build CSS kanban board in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Kbd Shortcut
Build CSS kbd shortcut in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS List Marker Style
Create ::marker rules for custom list bullets, numbers, colors, and weights. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS List Style Previewer
Use this free CSS list style previewer in your browser to preview and copy list marker position type and spacing CSS. Output stays private and local.
Open ToolCSS Loader Dots
Build CSS loader dots in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Loading Bar CSS Generator
Generate CSS loading bar CSS in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Logical Spacing Converter
Convert CSS logical spacing in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and no.
Open ToolCSS Logo Wall
Build CSS logo wall in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Magnetic Button
Build CSS magnetic button in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Masonry Fallback
Draft CSS column and grid fallbacks for masonry-style card layouts with a live preview and one-click copy. Free and private — nothing is uploaded.
Open ToolCSS Media Feature Query
Covers prefers-reduced-motion, prefers-color-scheme, pointer, and hover because those often change real interface behavior. Free and private in your browser.
Open ToolCSS Meter Style
Build meter element styling for low, optimum, and high value ranges. A storage usage meter can show safe, warning, and full states with matching colors.
Open ToolCSS Mobile App Shell
Build CSS mobile app shell in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and no.
Open ToolCSS Modal Dialog
Build CSS modal dialog in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Motion Path
Uses offset-path, offset-distance, and offset-rotate to move an element along a path without manually animating translate values. Private, in your browser.
Open ToolCSS Multi Step Form
Build CSS multi step form in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Nesting Preview
Preview CSS nesting in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Noise Overlay Generator
Generate CSS noise overlay in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and no.
Open ToolCSS Not Selector
Build :not selector chains for excluding states, variants, or nested content. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Notification Center
Build CSS notification center in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Nth Child Pattern
Generate nth-child selectors for repeating item patterns and staggered styling. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Nth Of Type Pattern
Build nth-of-type selectors for repeating patterns within matching element types. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS nth-child Tester
Use this free CSS nth-child tester in your browser to evaluate an-plus-b nth-child formulas against a finite item list. Output stays private and local.
Open ToolCSS Otp Input
Build CSS otp input in your browser with a live preview and one-click copy. Free and private: everything is generated locally in your browser with no upload.
Open ToolCSS Overlay Property
Preview overlay and transition-behavior CSS for top-layer UI elements. A dialog can keep its overlay transition smooth while it closes. Free, in your browser.
Open ToolCSS Overscroll Behavior
Build overscroll-behavior rules for drawers, modals, and nested scrolling panels. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Page Transition CSS
Build CSS page transition CSS in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Parallax Layer CSS
Build CSS parallax layer CSS in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolCSS Password Field
Build CSS password field in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Perspective Card
Build CSS perspective card in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and no.
Open ToolCSS Pointer Events Toggle
Generate pointer-events rules for overlays, disabled panels, and click-through layers. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Popover Anchor Position
Generate CSS anchor-position style snippets for popovers, menus, and callouts. Free and private in your browser, with nothing uploaded and no account.
Open ToolCSS Popover Style
Build CSS popover style in your browser with a live preview and one-click copy. It runs entirely client-side, so nothing is uploaded and no account is needed.
Open ToolCSS Poster Gradient
Generate CSS poster gradient in your browser with a live preview and one-click copy — free and private, generated locally in your browser with no upload and.
Open ToolNo tools match your search.