Design Tools

Generate a QR code from text or a URL in your browser. Adjust size and colors, then export an image for event entry points, landing pages, posters, and print materials. Content stays on this page and is not uploaded.

Decode QR codes locally in the browser from an uploaded image, an image URL, or the camera. Useful for reading screenshot QR codes, checking remote QR images, and on-site scanning.

Convert colors among HEX, RGB, HSL, HWB, CMYK, and CSS variables in your browser. Includes a color picker and random color helper for design handoff, stylesheet work, and brand-color alignment.

Visually adjust offset, blur, spread, color, opacity, and inset. Preview live and generate box-shadow CSS for cards, buttons, and overlays.

Calculate foreground/background contrast with WCAG 2.0 rules and check AA/AAA for normal and large text. Useful for accessible palettes and frontend readability review.

Visually build linear, radial, and conic CSS gradients. Adjust angle and stop positions, add multiple stops, and copy CSS for backgrounds, buttons, and brand transitions.

Convert among px, rem, em, pt, vw, vh, and %. Customize root font size, parent font size, and viewport size for responsive work and design-to-code handoff.

Generate palettes with monochrome, analogous, complementary, triadic, or fully random rules. Lock individual swatches and keep randomizing the rest for UI exploration and brand-color derivatives.

Visually tune blur, opacity, background color, and border opacity to generate frosted-glass CSS with a -webkit prefix. Useful for cards, nav bars, and modal layers.

Drag or type values to visualize and generate 8-point irregular CSS border-radius (fancy border radius) code.

From min/max viewport widths and a target size range, compute a clamp() formula for fluid font sizes, spacing, and other lengths that scale with the viewport.

Turn English letters and digits into terminal-friendly ASCII art for CLI banners, MOTD text, and plain-text README titles. Copy the result directly.

Inline SVG into a CSS background-image: url(...) string using URI encoding or Base64. Useful for small icons you want to keep in CSS instead of separate asset files.

Paste a long path d="M10 20 L... Z" string or a full path tag to visualize it on a grid and inspect length and command count while debugging icons.

Combine blur, grayscale, contrast, and related CSS filter functions with live preview. Drag sliders to build stacks such as filter: blur(2px) grayscale(100%); and copy the result.

Visually generate tilted corner-ribbon CSS for cards. Change text, colors, offset, width, and font size for sale, sold-out, and similar status badges.

Invert a color by subtracting each RGB channel from 255. Compare source and inverted colors, preview sample layers, and export a CSS variable snippet for dark-theme exploration.

Generate soft pastel and Morandi-style palettes in your browser. Choose count and style, lock swatches you want to keep, and export HEX lists or CSS variables for charts, backgrounds, and gentle UI themes.

Apply color-vision deficiency matrices to a sample view so you can preview how protanopia, deuteranopia, tritanopia, or achromatopsia may change UI colors. Use it to catch contrast and status-color issues before shipping.

Resize and re-encode images locally with Canvas. Set max dimensions, quality, and output format, then download the result. Original files stay in the browser and are not uploaded.

Tune flex-direction, justify-content, align-items, wrap, and gap with a live preview. Add or remove boxes to see wrapping and spacing, then copy the generated CSS (and HTML scaffold) into your project.

Set column and row counts plus gaps to generate a basic display:grid layout. Preview the track structure, try quick templates, and copy CSS or HTML for admin layouts and card grids.

Browse common CSS cursor keywords, hover to preview, filter by search or category, and copy cursor declarations. Useful when choosing resize, drag, or disabled-state cursors.

Browse Tailwind CSS color scales (including 50–950 steps) on one board. Search by name, scale, or HEX, then copy utility class names or raw HEX values for CSS projects.

Paste CSS declarations and map them to Tailwind utility classes where possible. Common layout, spacing, and color rules become standard classes; unmatched values fall back to arbitrary-value syntax.

Convert HTML snippets to React JSX in the browser. Rename class/for to className/htmlFor, close void tags, and convert inline styles toward object form. Conversion stays local.

Search and copy emoji commonly used in docs, commit messages, and changelogs. Filter by keyword or category to find status, progress, and warning symbols quickly.

Look up common HTML entities and numeric character references for spaces, currency, math, and typography symbols. Copy named or numeric forms for safer source markup.

Estimate the probability of at least one collision for a given hash bit length and sample size using the birthday-paradox approximation. Useful for short IDs and truncated checksums. Calculation stays in the browser.

Browse W3C/CSS named colors and their values. Filter by keyword or family, then copy the color name or HEX for native CSS work.

Paste SVG markup, extract fill/stroke colors into an editable palette, preview changes live, and copy the updated SVG. Built for icon recolors and simple vector tinting.

Pick a base color and generate schemes with complementary, analogous, triadic, tetradic, split-complementary, or monochromatic rules. Preview UI usage and export CSS variables for brand and component work.

Adjust width, height, padding, border, and margin with a live box-model diagram. Compare content-box vs border-box occupancy and copy the matching CSS.

Draw a horizontal or vertical pixel ruler on the page. Adjust length and tick spacing, and view window size plus device pixel ratio to check CSS pixel measurements against layouts and mockups.

See which CSS framework breakpoint matches the current window width in real time. Presets cover Tailwind CSS, Bootstrap, and Material UI, plus a custom list for responsive debugging.

Match a color to the closest CSS named colors in your browser. Candidates are ranked by color distance with names and hex values—useful when aligning keywords, finding near matches, or learning standard color names.

Compare two images pixel-by-pixel in the browser. Differing pixels are highlighted in red with counts and percentages—useful for UI regression screenshots, design version checks, and before/after reviews. Images stay local.

Check WCAG contrast for many foreground/background pairs at once. See AA/AAA levels and text previews—useful for design-system audits, brand-color batches, and accessibility reviews.

Blend four corner control colors into layered radial gradients with blur to create soft mesh-like backgrounds and copyable CSS—useful for landing pages, brand visuals, and multi-color experiments.

Tune color, opacity, blur, and outline to preview and generate frosted-glass card CSS with backdrop-filter. Useful for translucent panels and nav layers; everything runs in the browser.

Generate neumorphic inset/outset shadow CSS from background color, distance, and blur. Preview raised and pressed looks for buttons, cards, and light soft-UI controls.

Visually edit the four cubic-bezier control points, preview the easing curve, and copy a timing function for transitions and animations—useful for button motion and page transitions.

Generate Tailwind Grid classes from columns, gap, and item count with a live preview—useful for card grids, prototype layouts, and quick column experiments.

Generate CSS clip-path shapes from presets and simple controls with a live preview—useful for angled cards, badges, image crops, and decorative layouts.

Encode a font file to Base64 in the browser and generate an embeddable @font-face snippet—useful for demos, email templates, and single-file pages that temporarily inline fonts. Files stay local.

Extract dominant colors from an image in the browser and build a copyable HEX palette. Images are not uploaded—useful for poster sampling, brand references, and quick main-color analysis.

Choose a direction, size, and color to generate a pure CSS border triangle with a live preview and copyable code.

Generate pure CSS background patterns such as dots, stripes, checkers, and grids. Tune colors and size, then copy the CSS for decorative fills, placeholders, and visual experiments.

Clean SVG comments, editor metadata, and extra whitespace locally in the browser to produce shorter markup—useful for icon compression, export cleanup, and preparing inline SVG. This is a lightweight cleaner, not a full SVGO plugin pipeline.

Generate a lightweight SVG placeholder from width, height, background, label text, and font size—useful for prototype image slots, list skeletons, and loading placeholders. Copy the SVG markup when ready.