simpletool.io Browse tools

Tag: Design

  • Google Fonts Pairing Tool: Find Heading + Body Pairs [2026]

    Google Fonts Pairing Tool: Find Heading + Body Pairs [2026]

    TL;DR: A Google Fonts pairing tool helps you pick a heading font and a body font that work well together — usually one display/serif and one neutral sans-serif. The proven principle: contrast. Pair a high-character heading (Playfair Display, Bebas Neue, Lora) with a clean body (Inter, IBM Plex Sans, Source Sans Pro). Our free Google Fonts pair finder ships 30+ curated pairs, lets you preview any combination, and copies the @import + CSS variables ready to drop in. Browser-only.

    Picking two fonts that work together is the design decision developers most often get wrong. Defaulting to “Roboto for everything” works but reads as utilitarian; picking two display fonts at random produces visual chaos. The principle that designers use: contrast — pair fonts that differ along one axis (serif vs sans-serif, high-contrast vs low-contrast, geometric vs humanist) so headings and body don’t compete for attention.

    Our Google Fonts pair finder ships 30+ tested pairs (Inter + Playfair Display, IBM Plex Sans + IBM Plex Serif, Source Sans Pro + Lora, etc.) plus a free-form mode where you can preview any two of the 1,500+ Google Fonts side-by-side. Outputs a copy-paste <link> tag for the HTML head plus CSS variables. This guide covers what makes a good pair, the four anti-patterns that always fail, and how to verify your pair works at common font sizes.

    The 6 most reliable pairing patterns

    Pattern Heading Body Feel
    Editorial Playfair Display Source Sans Pro Magazine, premium publishing
    SaaS / clean Inter Inter Modern web app — single-family is fine
    Corporate / serious IBM Plex Serif IBM Plex Sans Banking, B2B, healthcare
    Display + neutral Bebas Neue Open Sans Posters, gym, agency
    Soft serif Lora Inter Blogs, literary, gentle
    Geometric duo Poppins DM Sans Startup, tech-forward

    The contrast principle (in one sentence)

    A good pair differs noticeably along one axis but not too many. The common axes:

    • Serif vs sans-serif (Playfair + Source Sans, Lora + Inter)
    • Display vs neutral (Bebas Neue + Open Sans, Lobster + Inter)
    • High-contrast vs low-contrast stroke weight (Cormorant + Work Sans)
    • Geometric vs humanist (Poppins + Lora — geometric heading, organic body)

    Anti-patterns: pairing two display fonts (chaos), pairing two serifs from different historical eras (uncomfortable), or using the same font at the same weight for headings and body (no hierarchy). Pick one axis of contrast; keep everything else aligned.

    How to find a font pair

    1. Open the Google Fonts pair finder
    2. Pick a curated pair from the gallery, or set a heading font and a body font manually
    3. Watch the live preview — heading at H1/H2/H3 sizes, body at 16px
    4. Adjust font weights (400 / 500 / 700) to fine-tune the look
    5. Click Copy <link> + CSS for production-ready code

    The CSS you’ll paste

    <!-- in <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">

/* in CSS */
:root {
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}
h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-body); }

    The preconnect hints save 100–200ms on first font load. display=swap ensures text renders in a system fallback while the web font loads, then swaps in (rather than showing invisible text during font-load).

    Performance — only load weights you actually use

    Each font weight (400, 500, 600, 700) is a separate download. Loading all eight weights of a font family adds 200+ KB; loading only 400 + 700 is typically 80 KB. Audit your design and request only the weights and styles you actually use:

    • Body: 400 (regular) and 700 (bold) is enough for most projects.
    • Headings: usually one weight — pick 700 for impact, 600 for softer headings, 800–900 for display work.
    • Italic: only request ital if your design uses italics. Many web designs don’t.
    • Variable fonts (Inter, Roboto Flex, Recursive) — load one variable font file that covers all weights, often smaller than two separate static weights.

    Common gotchas

    • Don’t pair two display fonts. One eye-catching font is contrast; two is chaos. Use one display font for headings, a neutral sans or serif for body.
    • Subset to the languages you support. Google Fonts loads only Latin by default, but for sites with Cyrillic, Greek, Vietnamese, or other scripts you must add the subset parameter — otherwise non-Latin characters fall back to a system font.
    • Self-host for GDPR compliance. Google Fonts CDN includes IP-address logging at Google. EU GDPR-strict sites self-host fonts via google-webfonts-helper or the Fontsource npm packages. Same fonts, no third-party request.
    • Variable fonts have axis ranges. Inter Variable goes from weight 100 to 900 in a single file. Specify font-weight: 525 for a custom in-between weight — useful for matching specific brand specs.
    • Body text needs ~16px minimum. Anything smaller fails accessibility recommendations (WCAG-AAA prefers 18px+) and causes mobile zoom-in. Don’t pair a “delicate” body font under 14px.
    • Cumulative Layout Shift (CLS). Web fonts swapping in shifts text reflow. Use font-display: optional to skip the swap on slow connections, or size-adjust CSS to match fallback metrics — both prevent CLS.

    When NOT to use a font pair

    Single-font designs work for many modern apps (Apple’s HIG uses just SF Pro across the system). If your interface is mostly text with little visual hierarchy, one well-designed font with clear weight differences (400 / 500 / 600 / 700) is enough. Pairing adds complexity — only do it when visual contrast helps the reader. For brand-heavy sites where the typography is the brand (publications, fashion, agencies), pairing matters more; for typical SaaS and dashboards, a single variable font is often the right answer.

    Frequently asked questions

    How many fonts should I use on a site?

    Two is the sweet spot — heading + body. One font (with weight variation) is acceptable for utilitarian designs. Three or more usually creates visual noise. Some designers add a third “accent” font sparingly for pull quotes or small UI details, but never for body text.

    Should I self-host Google Fonts?

    For privacy-strict (GDPR-leaning) sites, yes — use Fontsource npm packages or google-webfonts-helper to self-host. For everyone else, Google Fonts CDN is fine — fast, cache-friendly, free. The 2022 German court ruling against using Google Fonts CDN applies under specific GDPR interpretations and is rarely enforced internationally.

    Why does my page flash a different font on load?

    FOIT (flash of invisible text) or FOUT (flash of unstyled text) — caused by web fonts loading after the first paint. Use font-display: swap in your @font-face or Google Fonts URL, plus preconnect hints. For full elimination, preload the critical font subset with <link rel="preload">.

    Are variable fonts better than separate weight files?

    Usually yes for projects using 3+ weights — one variable file is smaller than 3+ static weights and gives you any in-between weight for free. For 1–2 weight projects, static files load slightly faster (variable files have a fixed parse overhead). Inter Variable, Roboto Flex, and Recursive are excellent variable fonts on Google Fonts.

    Is my data uploaded?

    No. The pair finder runs in your browser. Font selections, the live preview, and exported CSS stay on your device.

    Can I find a pair for a non-Latin script?

    Yes — pick a font that supports your script (toggle the language filter to Cyrillic, Greek, Arabic, Devanagari, etc.) and the tool restricts the gallery to fonts with full coverage. Body fonts for non-Latin scripts often need different pairings than Latin equivalents.

    Related tools and guides

     

  • Extract Colors from Image: Auto Palette Tool [2026]

    Extract Colors from Image: Auto Palette Tool [2026]

    TL;DR: An image color extractor analyses a photo or graphic and returns the 2–12 most representative colours as a palette. Behind the scenes most extractors run K-means clustering on the pixel data, sort the resulting clusters by population, and output each centroid as HEX/RGB/HSL. Use it for moodboards, brand palettes from a photo, theme generation, or matching ad creative to a hero image. Our free image color extractor runs entirely in your browser, supports up to 12 colours, and exports CSS variables ready to drop into your stylesheet.

    Designers extract colour palettes from images constantly. A photographer wants the dominant tones of a portrait for the gradient behind a website hero. A brand strategist needs the four real colours from a screenshot of a competitor’s ad. A film designer wants the palette of a single frame to match the rest of the spread. Doing this by eye works for two or three colours; doing it accurately for ten requires an algorithm that looks at every pixel.

    Our image color extractor runs K-means clustering directly in your browser via WebAssembly. Drop an image, pick how many colours (2 to 12), and the tool returns the centroids ranked by how much of the image each colour represents. Each swatch shows HEX, RGB, HSL, OKLCH, and the WCAG contrast ratio against black and white — useful for picking accessible text colours from a brand photo. This guide covers how K-means works in colour space, why it sometimes returns near-duplicate colours, and the gotchas with transparent backgrounds and EXIF rotation.

    When to use a palette extractor

    Use case Recommended count What you do with it
    Hero gradient from a photo 2–3 colours Use top 2 as gradient stops
    Brand palette from a logo 3–5 Verify exact brand HEX values
    Moodboard / inspiration 5–8 Save the swatches as a Figma library
    Album cover analysis 5–6 Generate a matching theme
    Ad creative colour match 3–4 Paint background to harmonise with image
    Competitor screenshot study 8–10 Audit their full palette

    How K-means clustering works (in colour terms)

    Plot every pixel as a point in a 3D colour space (RGB, or better still OKLab for perceptual uniformity). K-means then partitions those points into k clusters by:

    1. Pick k initial cluster centres at random (or via k-means++ for better starting points)
    2. Assign every pixel to the nearest centre
    3. Recompute each centre as the average of the pixels assigned to it
    4. Repeat steps 2–3 until centres stop moving (convergence)

    The output is k colours that minimise the total distance between every pixel and its assigned centre. Cluster size (number of pixels assigned) tells you how dominant each colour is in the original image.

    We use OKLab as the clustering space — distances in OKLab roughly match human perception, so two colours that look similar are also close in OKLab. Older extractors run K-means in raw RGB and produce odd results when an image has a wide hue range (RGB distance treats yellow and blue as much closer than the eye does).

    How to extract a palette in your browser

    1. Open the image color extractor
    2. Drop an image (JPG, PNG, WebP, HEIC supported)
    3. Pick the colour count (2–12)
    4. The palette appears in 1–3 seconds with each swatch labelled by HEX and percentage of the image
    5. Toggle Sort by percentage or Sort by hue
    6. Click any swatch to copy its HEX, RGB, HSL, or OKLCH
    7. Click Export CSS variables to download a --brand-N variable block ready to paste into :root

    Common gotchas

    • Near-duplicate colours. If your image is mostly skin tones, K-means with k=10 returns ten variations of the same beige. Drop k to 4–5, or use the “merge similar” option which post-processes the output to deduplicate within a perceptual distance threshold.
    • Transparent backgrounds skew the result. A logo on transparent background still has many fully-transparent pixels — by default we skip those. If your output looks wrong, check that the “ignore transparent” toggle is on.
    • EXIF rotation isn’t honoured by all extractors. A portrait photo from a phone is often stored as a landscape file with EXIF rotation metadata. Our tool reads the EXIF rotation and re-orients before extraction. Some tools don’t, and produce confusing palettes from the wrong “side” of the image.
    • JPEG compression artefacts inflate the palette. Compressed JPGs introduce subtle colour fringes near edges. K-means treats these as legitimate colours and may include them. Using a slightly higher k and merging similar colours afterward gives cleaner output.
    • Resolution matters less than you think. The tool downsamples to ~512×512 internally before clustering. A 4000×3000 photo and an 800×600 version of the same image produce nearly identical palettes — clustering is statistical, not pixel-perfect.
    • Random initialisation = slightly different output each run. K-means uses random starting points, so two runs on the same image can return slightly different palettes (within ~5% colour distance). For reproducibility, use the seeded mode with a fixed seed.

    Accessibility — pick text colours from the palette

    A common workflow: extract a palette from a hero photo, then use one of the extracted colours as the background and need a text colour that meets WCAG contrast on it. Each swatch in our output shows the contrast ratio against black and white — pick the colour combination with a ratio above 4.5:1 (AA standard for body text) or 7:1 (AAA). For coloured-text-on-coloured-background combinations, our “Pair check” overlay shows the contrast between any two extracted colours.

    When NOT to use this tool

    For brand-exact colours from a logo SVG, open the SVG and read the fill values directly — extraction approximates and can introduce small errors. For animated GIFs, the extractor uses only the first frame; for the full palette across all frames you’ll need a video-aware tool. For very small icons (under 64×64), there often aren’t enough pixels for K-means to produce a meaningful palette — pick the colours by eye instead. For batch processing many images in a CI pipeline, install node-vibrant or color-thief locally and write a script — much faster than running this tool by hand on each file.

    Frequently asked questions

    How accurate is the extracted palette?

    K-means in OKLab space gives results that closely match what a designer would pick by eye. The dominant 1–2 colours are virtually exact; minor colours can vary by a few HSL points between runs because of random initialisation. For pixel-perfect brand colours, sample directly from the source file with an image color picker instead.

    How many colours should I extract?

    3–5 for design palettes, 2 for hero gradients, 8+ for moodboards and competitive analysis. More than 8 colours often produces near-duplicates; fewer than 3 misses meaningful tones. Start with 5 and adjust.

    Why does the same image return different palettes?

    K-means uses random initialisation, so two runs can produce slightly different centroids. Differences are usually under 5% perceptual distance. Use the seeded mode (with a fixed seed string) for reproducible output across runs.

    Does it support transparent backgrounds?

    Yes — fully-transparent pixels are skipped by default. Semi-transparent pixels are blended against your chosen “background colour” (white by default). Toggle the background to dark or your brand colour for accurate extraction from logos with see-through regions.

    Is my image uploaded?

    No. The extractor runs K-means in your browser via WebAssembly. The image is loaded into a blob URL and the pixel data is processed locally — never uploaded.

    Can I export the palette in a specific format?

    Yes — the export menu offers JSON (programmatic), CSS variables (--brand-1: #... ready for :root), Tailwind config (drop into theme.extend.colors), Adobe ASE swatch file, and a PNG of the palette swatches.

    Related tools and guides

     

  • CSS Pattern Generator: Pure-CSS Backgrounds [2026]

    CSS Pattern Generator: Pure-CSS Backgrounds [2026]

    TL;DR: A CSS pattern generator outputs pure-CSS code for repeating background patterns — dots, grids, stripes, checks, isometric, halftone — with no image files needed. The technique uses repeating-linear-gradient, radial-gradient, and (modern browsers) image() + masks to draw geometric tiles directly in CSS. Result: tiny payloads (often under 100 bytes), infinite scaling, and styles that change with CSS variables. Our free CSS pattern generator ships 30+ presets with size, color, and angle controls.

    Background patterns used to mean a 1KB tileable PNG. Modern CSS makes most of them unnecessary — a dot grid is two short lines of radial-gradient; diagonal stripes are one repeating-linear-gradient; a graph-paper grid is two layered linear gradients. The CSS approach beats raster images on every axis: smaller payload, perfectly crisp on retina displays, theme-aware (use CSS variables for colors), and editable in DevTools without rebuilding assets.

    Our CSS pattern generator ships 30+ tested patterns across categories: dots (uniform dot grid, scattered, halftone), lines (horizontal, diagonal, crosshatch), grids (graph paper, isometric, hex), geometric (zigzag, chevron, scales). Adjust pattern size, foreground/background color, and angle. Outputs production-ready CSS with the canonical pattern declaration plus a fallback for older browsers.

    Pattern types and what each looks like

    Pattern Technique Best for
    Dot grid radial-gradient tile Subtle background, hero sections
    Graph paper Two linear-gradient layers Notebook / sketch UIs, illustrations
    Diagonal stripes repeating-linear-gradient Caution / warning blocks, accents
    Checkerboard Two linear-gradient layers at 45° offset Transparency indicator, retro aesthetic
    Isometric grid Three linear-gradient layers at 60° 3D illustrations, blueprint look
    Crosshatch Two diagonal repeating-linear-gradient Editorial, illustration backgrounds
    Halftone Sized radial-gradient with background-size Comic / pop-art aesthetic

    A simple dot-grid example

    The minimal CSS for a 2px dot every 24px:

    .dot-grid {
  background-color: #fffdf8;
  background-image: radial-gradient(circle, #635BFF 1px, transparent 1px);
  background-size: 24px 24px;
}

    Two lines plus background color = a perfect dot grid. Resize the background-size to change spacing, swap the colors for different themes. No image, no PNG asset, scales infinitely.

    How to generate a CSS pattern

    1. Open the CSS pattern generator
    2. Pick a pattern type from the gallery
    3. Adjust pattern size (the spacing of the repeat), foreground color, background color, and angle (where supported)
    4. Watch the live preview update across the full panel
    5. Click Copy CSS for the production-ready declaration with comments and CSS variables

    Why CSS patterns beat image tiles

    • Tiny payload. A dot grid is ~80 characters of CSS. The same as an image is 0.8–2 KB after PNG compression.
    • Infinitely scalable. A 24px tile renders crisp on a 5K display because the gradient is rasterised at the actual pixel density. PNG tiles need 2× / 3× variants for retina.
    • Theme-aware. Use CSS variables for colors and the same pattern adapts automatically to dark mode without separate assets.
    • Editable in DevTools. Tweak background-size live without rebuilding any image.
    • Server caching is irrelevant. No separate request — the pattern is part of the CSS file.

    Common gotchas

    • Performance on huge fills. A repeating-gradient pattern on a full-page background performs fine. Stacking 4+ pattern layers on the same element can slow down older mobile devices — keep complex patterns to small areas.
    • Background-attachment fixed + patterns. Using background-attachment: fixed with a CSS pattern can cause repaints on scroll. Use scroll (default) for performance unless the parallax effect is essential.
    • Patterns don’t shift with mouse / scroll. If you want a “parallax” pattern effect, you need JavaScript or transform-based motion — pure CSS patterns are static relative to their element.
    • Print stylesheets. Browsers often disable background images and patterns for print to save toner. Set -webkit-print-color-adjust: exact if printing the pattern matters.
    • Edge alignment. Pattern tiles align to the element’s background-origin. If you have padding or border-radius, the pattern continues underneath them — useful for seamless backgrounds, but watch for asymmetric clipping at corners.
    • Color overlap. When stacking multiple gradient layers (e.g., grid = horizontal lines + vertical lines), check that they blend correctly. Use the + blend mode or rgba() colors with appropriate transparency.

    When NOT to use a CSS pattern

    For organic, illustrated, or photographic patterns (watercolor textures, fabric, paper grain), use a real image — CSS gradients can’t produce non-geometric shapes. For animated patterns (slowly drifting backgrounds), use SVG with smil animations or a canvas — CSS background-position animation is choppy. For SEO-relevant images (where the pattern is content, not decoration), use a real image with proper alt text. For very complex patterns (snowflakes, paisley, custom logos repeated), use a tileable SVG instead — more efficient than 10+ stacked gradients.

    Frequently asked questions

    Are CSS patterns supported in all browsers?

    Yes — radial-gradient and repeating-linear-gradient have been supported since Chrome 26, Firefox 16, Safari 7. Universal support in 2026. Even IE 11 had partial support (no repeating gradients but solid patterns work).

    Will CSS patterns slow down my page?

    Single patterns: no — they’re rendered at GPU speed and cached. Multiple stacked patterns on the same large element can slow paint times on older mobiles, but typical use (one pattern per page) has zero measurable impact.

    Can I animate a CSS pattern?

    Limited — you can animate background-position for a “scrolling” effect, or animate background-size for pulsing. More complex animation (morphing patterns, shape changes) requires SVG or canvas. Animating background-position is GPU-accelerated and smooth.

    How do I make the pattern darker / lighter?

    Adjust the foreground and background colors directly in the CSS. Pure black/dark patterns on light backgrounds maximise contrast; semi-transparent foregrounds (e.g., rgba(0,0,0,0.05)) produce subtle textures that don’t compete with content.

    Is my data uploaded?

    No. The generator runs in your browser. Pattern selections, customisations, and the generated CSS stay on your device.

    Can I export the pattern as an image?

    Yes — there’s a “Download as PNG” option that rasterises the pattern at chosen size (256×256, 512×512, or full-screen). Useful for fallbacks in old browsers, or when an image asset is required (CMS that doesn’t accept inline CSS, email templates, etc.).

    Related tools and guides

     

  • SVG Pattern Generator: Tileable Backgrounds [2026]

    SVG Pattern Generator: Tileable Backgrounds [2026]

    TL;DR: An SVG pattern generator outputs tileable SVG graphics — repeating shapes (dots, triangles, hexagons, lines, scales) that can be used as background-image fills. SVG patterns scale infinitely, accept custom colors via CSS variables, and produce smaller payloads than equivalent PNG tiles for most cases. Our free SVG pattern generator ships 60+ tested shapes, exports as standalone SVG, PNG raster, or CSS data URL — ready to drop into any stylesheet.

    For repeating decorative backgrounds, the choice in 2026 is between three approaches: pure CSS gradients (smallest, geometric only), SVG patterns (vector-perfect, complex shapes), or PNG tiles (legacy fallback). SVG wins when your shape is anything more complex than dots and stripes — hexagonal grids, isometric blocks, scaled fish-scales, abstract logos repeated. SVG patterns are also CSS-variable-friendly: change a single CSS custom property and the entire tiled pattern re-colors without regenerating the asset.

    Our SVG pattern generator ships 60+ tested patterns with size, color, and density controls. Outputs three forms: standalone .svg file (use as background-image: url(...)), Base64 data URL (inline in CSS), or PNG export (legacy fallback). Patterns are seamless — the right edge meets the left edge cleanly, the top meets the bottom — so any tile size repeats without visible seams. This guide explains how SVG patterns are constructed, when SVG beats CSS or PNG, and the gotchas with anti-aliasing at tile boundaries.

    SVG vs CSS vs PNG patterns

    Approach File size Best for
    CSS gradient ~80 bytes Dots, lines, stripes, simple grids
    SVG pattern 300-1500 bytes Triangles, hexagons, complex shapes, custom logos
    PNG tile 2-15 KB per tile Photographic textures, complex non-geometric

    If your pattern can be expressed as gradients (dots, lines, grids), use CSS — smallest payload. If it’s geometric but more complex than gradients allow (triangles, hexagons), use SVG. If it’s photographic or organic (paper texture, fabric weave), use PNG.

    SVG pattern anatomy

    A typical SVG pattern is a repeating tile defined inside a <defs> block, then referenced as a fill:

    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <defs>
    <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="2" fill="#635BFF"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#dots)"/>
</svg>

    The <pattern> element defines a 20×20 tile with a single circle at the centre. The outer rectangle fills the entire SVG with that pattern. Change pattern dimensions, fill colour, or geometry — the pattern updates automatically.

    How to generate an SVG pattern

    1. Open the SVG pattern generator
    2. Pick a shape from the gallery (60+ options across 5 categories)
    3. Adjust tile size, foreground color, background color, and density
    4. Watch the live preview render the seamless tile
    5. Export: standalone SVG file, Data URL (CSS-ready), or PNG rasterized at chosen resolution

    Using SVG patterns as CSS backgrounds

    Two ways to include an SVG pattern in CSS:

    • External file: background: url("/patterns/dots.svg") repeat; — saves a separate request, cacheable, scales with browser zoom.
    • Inline data URL: background: url("data:image/svg+xml;utf8,<svg...>") repeat; — no extra request, theme-able with CSS variables.

    For one-off patterns, inline data URLs save a round-trip; for patterns reused across many pages, external files cache better. For maximum flexibility, use a CSS variable for the pattern’s primary color: the data URL references it via fill="currentColor" or accepts injected colors via background-image stacking.

    60+ shapes shipped with the generator

    • Dots: uniform grid, scattered, halftone, polka, large/small mix
    • Triangles: equilateral, scalene, isometric grid, chevron, sawtooth
    • Hexagons: honeycomb, beehive, isometric, soccer-ball-style
    • Lines: diagonal, crosshatch, sketchy, double-line, wave
    • Scales: fish, dragon, oversized, miniature
    • Geometric: circles, squares, plus signs, asterisks, stars, arrows
    • Floral: abstract flower tile, art-deco fan
    • Tech: circuit traces, schematic, blueprint grid

    Common gotchas

    • Anti-aliasing at seams. If your shape touches the edge of the tile, anti-aliasing can produce visible vertical or horizontal lines where tiles meet. Add 1px padding inside the tile (so shapes don’t touch the edge) or use SVG’s shape-rendering: crispEdges.
    • Data URLs need careful escaping. Inline SVG in CSS data URLs needs URL encoding (%, #, ", etc.). Use ? as a safe alternative for < if your CSS toolchain breaks. Our generator outputs already-escaped data URLs.
    • Vector but not infinite. SVG patterns scale with display zoom but the pattern tile size is fixed in the generator output. To make tiles scale with viewport, use CSS background-size: 5vw 5vw or similar — but that distorts the pattern.
    • Custom fonts in patterns don’t work. If your pattern uses text glyphs (e.g., a tiled “★” character), include the font definition inline via @font-face in the SVG itself, or use SVG path data for the character. External font files won’t load in SVG-as-image contexts.
    • Pattern size affects performance. Tiny tiles (under 8×8) render slower than larger ones because the GPU has to repeat them more times. For very fine patterns, use a 32×32 tile with multiple instances inside.
    • Background-attachment: fixed + SVG patterns. Patterns repeat strangely with background-attachment: fixed on some browsers. Test before deploying parallax-style background effects.

    When NOT to use an SVG pattern

    For simple geometric patterns (dots, lines, grids), use CSS gradients — smaller payload, same effect. For photographic or organic textures (paper, fabric, watercolor), use a PNG with proper compression. For animated patterns (drifting, morphing), use a CSS animation on the SVG itself or a canvas-based approach. For very large patterns where the tile is 1000×1000+, you’re better off with a real image — at that size SVG offers no advantage over PNG. For extremely tight performance budgets, even a small SVG pattern adds 500–1500 bytes; CSS gradients add 80.

    Frequently asked questions

    Are SVG patterns faster than PNG?

    For most simple shapes: yes, smaller and faster. For very complex patterns or photographic-quality textures: no, PNGs (especially WebP or AVIF) compress better. Rule of thumb: if the pattern is geometric, SVG; if it’s organic, raster.

    Can I edit the SVG pattern after generating?

    Yes — the output is plain SVG markup. Open in any text editor, change fill values, adjust shapes inside the <pattern>, scale the tile dimensions. Or import into Figma / Illustrator / Inkscape for visual editing.

    Will the pattern look the same on retina displays?

    Yes — SVG is vector, so it renders pixel-perfect at any DPI. PNG patterns need 2× / 3× variants for retina; SVG doesn’t.

    Can I use CSS variables for pattern colors?

    Inside an SVG file referenced via external URL, CSS variables don’t propagate. For inline data URLs in your CSS, use currentColor in the SVG fills, then set color on the parent element to control the pattern’s primary color. For full theme support, generate the pattern programmatically and inject CSS variable values.

    Is my data uploaded?

    No. The generator runs in your browser. Pattern selections, customisations, and the generated SVG/PNG/data URL stay on your device.

    Can I use these patterns commercially?

    Yes — the generated SVG is your output, no attribution required. The shape templates are designed for any use including commercial work. The exception: if you upload your own custom shape and the original asset has licensing restrictions, those carry over to the generated pattern.

    Related tools and guides

     

  • Average Color of an Image: Finder Tool [2026]

    Average Color of an Image: Finder Tool [2026]

    TL;DR: An image average color finder computes the single colour that best represents an image — usually the arithmetic mean of every pixel’s RGB values. The mean often produces a muddy gray for colourful images; the dominant colour (most-frequent cluster) is usually more useful. Used for hero gradients that match a photo, fallback colours while a lazy-loaded image loads, theme-detection from album art, and accessibility checks. Our free image average color finder reports mean, median, and dominant in one go.

    “What’s the average colour of this image?” is a deceptively simple question. The naive answer — sum every pixel’s red, green, and blue values, divide by total pixels — produces the mean colour, but that’s often a muddy brown that doesn’t match anyone’s intuition of what the image “looks like”. A bright photo of a sunset (oranges, reds, dark blues) averages to a dull purple-grey. The dominant colour — the colour that appears most frequently after clustering — is usually a more useful answer.

    Our image average color finder reports four different metrics at once: mean (arithmetic average), median (the colour at the centre of the distribution), dominant (most common after clustering), and weighted average (excluding background pixels). Pick the one that matches your need. Drop in any image, get all four values as HEX/RGB/HSL/OKLCH, plus a CSS-variable export. Browser-only.

    Mean vs median vs dominant — pick the right metric

    Metric How it’s computed Best for
    Mean Sum each channel, divide by pixel count Lazy-load placeholders (BlurHash equivalent)
    Median Value at the 50th percentile per channel Robust against outlier pixels
    Dominant Most common cluster after K-means k=1 Theme detection, brand-color extraction
    Weighted Mean excluding near-white / near-black Photos with white background; ignores chrome
    Center-weighted Mean with central pixels weighted higher Subject-focused content (portraits, product shots)

    Why mean often disappoints

    Imagine an image of a sunset: red sun, orange sky, blue water. The mean of red + orange + blue is a desaturated brown-grey — a colour that nothing in the image actually is. Mean is a statistical average, not a perceptual representative. For lazy-load placeholders this is fine (you want a single colour that’s unobtrusive), but for “what colour is this image?” answers, dominant is usually closer to intuition.

    Mean works well for:

    • Image-loading placeholders (Material Design’s blur-up technique)
    • Fallback background colour while lazy-loading
    • Generating a complementary text-overlay colour

    Dominant works better for:

    • Theme detection — pick a UI accent colour matching a hero photo
    • Brand-colour extraction from a logo
    • Generating gradient backgrounds that “match” the image

    How to find the average color

    1. Open the average color finder
    2. Drop your image (JPG, PNG, WebP, HEIC supported)
    3. The tool computes mean, median, dominant, weighted average — all four — in 1–2 seconds
    4. Pick the metric that fits your use case; copy HEX, RGB, HSL, or OKLCH
    5. Export as CSS variable (--image-color: #94896D) for direct use in stylesheets

    Common gotchas

    • Transparent pixels affect mean. By default we count fully-transparent pixels as the chosen “background” colour (white by default). Toggle “ignore alpha” to skip them entirely — better for logos on transparent backgrounds.
    • Resolution affects performance. Computing mean is O(n) over pixel count. A 4000×3000 image (12M pixels) processes in ~200ms; a 12000×9000 image (108M pixels) takes ~2 seconds. The tool downsamples to 1024×1024 internally for speed — visually identical result for any image larger than that.
    • JPEG compression artefacts shift the mean. Heavily compressed JPGs introduce per-block colour shifts that pull the mean toward greys. For brand-color work, use original PNG / TIFF / WebP if available.
    • EXIF rotation matters. A photo from a phone may be stored sideways with EXIF rotation metadata. Our tool reads the EXIF orientation and applies it before computing — ensures the “mean” is over the visible image, not a sideways version.
    • Per-region sampling for hero images. A hero image often has chrome at the top (logo, navigation) that you don’t want included in the average. Use the “region” tool to draw a rectangle covering only the photographic content, then compute over that.
    • Color space matters. Mean in RGB space biases toward greys (perceptually inaccurate). Mean in OKLab space produces a more perceptually-uniform answer. Our tool reports both — pick OKLab for design work, RGB for compatibility.

    When NOT to use this tool

    For a multi-colour palette extracted from an image, use the Image Color Extractor — it returns 2–12 colours via K-means clustering. For pixel-perfect colour sampling at a single point, use the Image Color Picker — it shows the exact colour under your cursor. For lazy-load placeholders in production, libraries like plaiceholder or blurhash are more efficient than recomputing on every page load. For colour-detection in real-time video, use OpenCV.js or a WebGPU shader — much faster than per-frame canvas sampling.

    Frequently asked questions

    Why does the mean colour look different from the image?

    Mean is a statistical average across all pixels. For images with high colour variation (sunsets, landscapes), the mean often lands in muddy territory — desaturated brown or grey — because opposing colours cancel out. The dominant colour is usually closer to what you’d intuitively call “the image’s colour”.

    Mean, median, or dominant — which should I use?

    For lazy-load placeholders: mean (unobtrusive). For theme detection or brand-colour extraction: dominant. For photos with extreme outliers (one bright spot in a dark image): median. Try all four — our tool computes them simultaneously and shows all swatches.

    Does it support transparent backgrounds?

    Yes — toggle “ignore alpha” to skip transparent pixels entirely. Otherwise transparent pixels are blended against your chosen background colour (white by default). Critical for logos on transparent backgrounds.

    Can I sample a specific region?

    Yes — draw a rectangle on the image to limit the sample area. Useful for hero images where you want to skip the navigation chrome, or product photos where you want to skip the white background.

    Is my image uploaded?

    No. The finder runs in your browser via the canvas API. Image data is processed locally — never sent to our servers.

    What’s the difference between OKLab and RGB averaging?

    Averaging in RGB biases toward greys because R+G+B sums tend to centre around perceptual middle. Averaging in OKLab (a perceptually-uniform colour space) produces a result closer to what the eye perceives as the “centre” of the image’s colour distribution. Our tool reports both for comparison.

    Related tools and guides

     

  • SVG Blob Generator: Random Organic Shapes [2026]

    SVG Blob Generator: Random Organic Shapes [2026]

    TL;DR: An SVG blob generator creates organic, asymmetric shapes — like rounded amoeba silhouettes — using randomised cubic Bezier curves around a circle. Used as decorative backgrounds, hero accents, sticker-style highlights, and avatar masks. Our free SVG blob generator ships a complexity slider, randomness control, gradient fills, and a seed value so you can re-generate the exact same blob later — plus PNG export with transparent background.

    Blobs are the visual mascot of late-2010s design — the Stripe, Notion, and Headspace school of organic shapes that fill awkward white space without looking like clip art. They work because the eye reads them as friendly and distinct from the rectangles that make up most of a UI. The trick is producing random-but-not-too-random curves: too uniform and the blob looks like a cookie-cutter circle; too chaotic and it looks like an inkblot.

    Our SVG blob generator uses a noise-perturbed circle algorithm — start with N evenly-spaced points around a circle, perturb each radius by a controlled amount of noise, and connect the points with smooth cubic Bezier curves. Adjust complexity (number of points, 3 to 12) and randomness (how much each point can move). Lock a seed value to reproduce the exact shape, or shuffle for a fresh variation. Outputs SVG (preferred for scaling) or PNG with transparent background.

    When blobs work — and when they don’t

    Use case Blob OK? Notes
    Hero section accent / background shape Yes The classic 2018-2024 Stripe / Notion look
    Decorative backdrop behind text Yes (with low opacity) Keep contrast above WCAG threshold
    Avatar mask Yes Used as clip-path: path() for image cropping
    Brand logo No Random shapes can’t be reproduced consistently
    Icon set No Use shape primitives or hand-drawn SVGs
    Fintech / serious B2B UI Maybe Trends suggest the look is fading — verify against your brand

    How blob shapes are generated (the algorithm)

    The simplest blob algorithm: pick N points evenly around a circle (e.g., N=8 means one point every 45°), add or subtract a random amount from each point’s radius (e.g., ±15%), then connect the points with a smooth Catmull-Rom or cubic Bezier spline. The result is a closed organic shape.

    Two parameters control the look:

    • Complexity (point count): 3–4 produces simple organic shapes; 6–8 the typical “blob” appearance; 10–12 starts to look bumpy. Higher counts approach a circle.
    • Randomness (radius variance): 0% returns a perfect circle; 15% gives the typical Stripe-style blob; 50%+ produces dramatic, almost star-like shapes; 80%+ gets weird.

    The “seed” is the random number generator initial value. Same seed + same parameters always produces the same blob — useful for reproducible designs and storing a specific shape in a stylesheet.

    How to generate a blob in your browser

    1. Open the SVG blob generator
    2. Adjust complexity (points), randomness (variance), and size
    3. Pick fill — solid colour, linear gradient, or radial gradient
    4. Click Shuffle for a new random shape, or paste a seed string for a specific one
    5. Click Copy SVG for inline use, Download SVG for asset library, or Download PNG for legacy systems

    SVG output anatomy — what you’ll paste

    <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M150,100 C170,140 130,180 100,170 C70,180 30,150 30,100 C20,60 60,30 100,30 C140,20 160,60 150,100 Z"
    fill="#635BFF"
  />
</svg>

    The viewBox="0 0 200 200" defines a coordinate system; the actual rendered size is set by CSS or the width/height attributes. Inline the SVG to style the blob with CSS variables, or reference an external file via <img src="blob.svg">.

    Common gotchas

    • Don’t animate blob shape directly. CSS animation between two SVG paths needs equal point counts; otherwise the morph fails or looks broken. Use the same complexity for the start and end blob, only varying the seed.
    • Fill colour vs stroke colour. Most decorative blobs use only fill (no border). If you add a stroke, the path must be closed (ending in Z) — the generator handles this, but custom-edited blobs may render with a thin gap.
    • SVG sizing pitfalls. Set width and height via CSS (.blob { width: 100%; height: auto; }) — hard-coded width/height attributes don’t scale with parent containers.
    • Gradients need <defs>. Linear and radial gradients in SVG live inside a <defs> element and reference an ID. Generated SVG includes the defs — but if you copy only the path and forget the gradient definition, the blob renders solid black.
    • Same seed across browsers. JavaScript’s Math.random() isn’t seeded by default, so two browsers running the same generator can produce different blobs. We use a seedable PRNG (xoroshiro128+) for reproducibility.
    • Blob trends fade. The blob aesthetic peaked around 2020. By 2026 some brands are returning to grids, geometric patterns, or gradient meshes. Don’t blob everything — use sparingly as one design element among many.

    When NOT to use a blob

    For a brand identity (logo, mark, lockup), don’t use random blobs — your brand needs a consistent shape that can be reproduced exactly across business cards, app icons, billboards, and embroidery. For functional UI shapes (modal corners, button radii, container shapes), use plain border-radius or clip-path with named values — blobs are too distracting for primary UI elements. For animations between many shapes, use a dedicated motion library (Framer Motion, GSAP) with proper SVG morph plugins. For data visualisation, blobs are decoration, not data.

    Frequently asked questions

    Can I edit the blob after generating?

    Yes — the SVG path is just a string of cubic Bezier commands. Edit the d attribute manually for fine-tuning, or import the SVG into Figma / Illustrator / Inkscape for visual editing. To re-randomise within the generator, change the seed.

    Will the same seed produce the same blob across browsers?

    Yes — we use a deterministic PRNG (xoroshiro128+), so the same seed and same parameters produce identical SVG everywhere. Useful for reproducible designs.

    Can I animate between two blobs?

    Yes, but both blobs must have the same point count for smooth interpolation. Generate both with the same complexity setting and only change the seed; the animator can morph between the two paths. CSS path animations or libraries like GSAP MorphSVG handle this.

    Should I use SVG or PNG?

    SVG for web — vector scales without loss, has CSS-controllable fill, and is tiny (often under 1 KB). PNG for legacy systems that don’t render SVG (some older email clients, very old CMS plugins). PNG output is rasterised at 2× resolution by default for retina displays.

    Is my data uploaded?

    No. The generator runs in your browser. The blob shape, seed, and exported SVG/PNG never leave your device.

    Can I use blobs in print or for stickers?

    Yes — SVG scales infinitely, perfect for stickers, business cards, or large-format print. Convert to PDF or AI in your design tool of choice; the source SVG paths are widely supported.

    Related tools and guides

     

  • SVG to PNG Converter: Retina Export in Browser [2026]

    SVG to PNG Converter: Retina Export in Browser [2026]

    TL;DR: An SVG to PNG converter rasterises a vector SVG into a PNG image at any custom dimensions, with optional transparent or solid background. Useful when uploading to platforms that don’t accept SVG (most social media, many email clients, app stores). Our free SVG to PNG converter runs in your browser, supports custom width/height plus retina exports (1x/2x/3x), and never uploads your SVG.

    SVG is the right format for icons, logos, and any vector art that needs to scale infinitely. Browsers love SVG — small file size, perfect crispness at any zoom, CSS-themable. But not every platform accepts SVG. Instagram, X/Twitter, LinkedIn, and TikTok all reject SVG uploads. Most email clients won’t render embedded SVG. App store icon submissions require PNG. The standard fallback is to convert SVG to PNG at the right resolution before upload.

    Our SVG to PNG converter handles single SVGs and batch conversions, with custom dimension control and retina export modes. The conversion happens via the browser’s canvas API; your SVG never uploads. This guide explains the right output dimensions for common use cases, the transparency handling, and the gotchas with embedded fonts and external references in SVG files.

    Standard PNG export sizes for common use cases

    Use case Recommended PNG size
    Favicon 32×32, 192×192, 512×512 (multiple sizes for different contexts)
    App icon (iOS/Android) 1024×1024 master, downsampled to platform requirements
    Social media profile picture 400×400 (universally supported)
    Logo on website (retina) 2× the display size (e.g., 600×200 PNG for a 300×100 logo slot)
    Email signature 300×100 max (kept under 100 KB to avoid clipping)
    Print materials 300 DPI at intended print dimensions (4 in × 4 in = 1200×1200)

    How to use the browser SVG to PNG converter

    1. Open the SVG to PNG converter
    2. Drop your .svg file or paste SVG markup directly
    3. Set the output width and height (preserves aspect ratio by default)
    4. Choose background: transparent (default), white, or custom colour
    5. Optional: tick 1x / 2x / 3x to export multiple retina variants in one go
    6. Click Download. Single file or ZIP for multi-variant exports

    SVG features that may not survive conversion

    • External font references. If your SVG uses font-family: "Custom Font" and the font isn’t available, the browser substitutes a default. Either embed font data in the SVG or use <text> as outlined paths.
    • External image references. SVGs that reference external images via <image href="..."> may produce CORS errors during canvas rasterisation. Embed images as Base64 data URIs instead.
    • Filter effects. Some SVG filters (Gaussian blur, displacement maps) render slightly differently across browsers. The PNG result captures whatever the current browser produces.
    • SVG animations. SMIL or CSS animations are captured at the current frame. To export a specific animation state, pause the animation before triggering export.

    Converting in code

    // Browser (canvas)
const img = new Image();
img.src = "data:image/svg+xml;utf8," + encodeURIComponent(svgString);
img.onload = () => {
  const canvas = document.createElement("canvas");
  canvas.width = 512; canvas.height = 512;
  canvas.getContext("2d").drawImage(img, 0, 0, 512, 512);
  canvas.toBlob(blob => downloadBlob(blob, "out.png"));
};

// Node.js (sharp — best quality)
import sharp from "sharp";
await sharp("logo.svg").resize(512, 512).png().toFile("logo.png");

// Python (cairosvg)
import cairosvg
cairosvg.svg2png(url="logo.svg", write_to="logo.png",
                 output_width=512, output_height=512)

// CLI (rsvg-convert)
rsvg-convert -w 512 -h 512 logo.svg -o logo.png

    Common conversion mistakes

    • Exporting at 1x for retina displays. A 300×100 logo at 1x looks blurry on retina. Always export at 2x or 3x and scale down via HTML width/height attributes.
    • Forgetting transparency. Default canvas backgrounds are white in some libraries. Verify the PNG has the transparent background you expect.
    • Tiny dimensions for app icons. Always start from a high-res master (1024×1024) and downsample to platform requirements. Upscaling small PNGs produces blurry icons.
    • Skipping background colour for printing. Print processes don’t handle transparency well; export with explicit white background for print PNGs.

    Frequently asked questions

    Why convert SVG to PNG at all?

    Many platforms reject SVG uploads — Instagram, X/Twitter, TikTok, LinkedIn for posts, most email clients, app stores. PNG is universally accepted. Convert when you need to upload your vector logo or icon to one of these platforms.

    Will the PNG be as crisp as the SVG?

    At the export resolution, yes. Below the export resolution, the browser interpolates which causes slight blur. Above, the PNG can’t add detail. Always export PNGs at 1x-3x the intended display size.

    Does the converter preserve transparency?

    Yes — by default the PNG has a transparent background. Toggle to add a solid colour (white is most common for print) when needed.

    Can I batch convert multiple SVGs?

    Yes — drop multiple SVG files. Each converts to PNG at your chosen dimensions. Result downloads as a ZIP of all PNGs.

    Is my SVG uploaded?

    No. The browser reads the SVG locally, rasterises on canvas, and offers PNG download. No network requests during conversion.

    What’s the maximum SVG complexity the converter handles?

    Limited by browser memory. Very complex SVGs (thousands of paths, large embedded images) may take 5-15 seconds to render. For production logos and icons, conversion is instant.

    Related tools and guides

     

  • CSS Clip Path Generator: Visual Polygon Editor [2026]

    CSS Clip Path Generator: Visual Polygon Editor [2026]

    TL;DR: CSS clip-path defines a region that an element is rendered inside — anything outside that region is clipped (transparent). Shapes can be a polygon (polygon(0 0, 100% 0, 100% 50%)), circle (circle(50% at 50% 50%)), ellipse, or inset rectangle. Our free CSS clip-path generator ships 18 presets (hexagon, arrow, talk bubble, parallelogram, chevron, star), a draggable-vertex editor, and one-click copy of the production CSS.

    CSS clip-path is the modern way to give an element a non-rectangular outline without resorting to SVG masks or background images. A clipped <img> stays a real <img> — accessible, responsive, link-able, and crisp at every device pixel ratio — while looking like a hexagon, arrow, parallelogram, or talk bubble. It’s used for hero-section diagonals, avatar masks, sticky badge tags, and the angled section breaks designers love and developers used to hate.

    The reason developers used to hate it: writing polygon() coordinates by hand is tedious and the syntax is unforgiving. polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%) is a pentagon — but you wouldn’t guess that from the numbers. Our CSS clip-path generator solves that with a visual editor: drag the vertices on a live preview and the CSS updates in real time. This guide covers every shape function, the gotchas with overflow and box-sizing, and the browser support story in 2026.

    The 4 clip-path shape functions

    Function Syntax Best for
    polygon() polygon(x1 y1, x2 y2, ...) Custom shapes with corners (hexagon, arrow, talk bubble)
    circle() circle(50% at 50% 50%) Avatar masks, circular thumbnails
    ellipse() ellipse(50% 25% at 50% 50%) Stretched circles, oval avatars
    inset() inset(10px 20px 30px 40px round 8px) Rounded-rect with inset edges (asymmetric)
    path() path("M 0 0 L 100 50 ...") SVG-grade complex shapes (curves, arcs)
    shape() (CSS Shapes 2) shape(from 0 0, line to 100% 0, ...) 2026 syntax — readable polygon alternative

    Coordinate system and units

    Clip-path coordinates are measured from the top-left of the element. The X axis grows rightward; Y grows downward. Both axes accept percentages (relative to the element’s box) or absolute units (px, em, rem). Mixed units work: polygon(0 0, 100% 0, 100% calc(100% - 20px), 50% 100%, 0 calc(100% - 20px)) creates a banner with a 20px wave at the bottom regardless of card height.

    The default reference box is the border-box (the element’s outer edge). You can change this with clip-path: polygon(...) padding-box or other box keywords — useful when you want the clip to follow the padding zone instead of the border.

    How to design a clip-path with the visual editor

    1. Open the clip-path generator
    2. Pick a preset shape (hexagon, talk bubble, arrow, etc.) — or start from a rectangle
    3. Drag the vertices on the live preview to fine-tune the shape
    4. Add or remove vertices with the + / − buttons
    5. Toggle the test image (your image or one of the demo photos) to see the clip in context
    6. Copy the generated CSS, including the clip-path declaration and a fallback for older browsers

    18 production-ready presets

    The generator ships these presets so you can grab a working shape in one click:

    • Polygons: Triangle, Trapezoid, Parallelogram, Rhombus, Pentagon, Hexagon, Heptagon, Octagon, Nonagon, Decagon, Star
    • Arrows: Right Arrow, Left Arrow, Chevron Right
    • UI shapes: Talk Bubble, Cross / Plus, Slash Cut, Frame

    Each preset is named in the dropdown — click and the editor loads the polygon coordinates. Customise from there.

    Browser support and the IE legacy

    clip-path with all shape functions is supported in every modern browser: Chrome 23+ (2012), Firefox 54+, Safari 7+, Edge 79+. The path() function landed slightly later (Chrome 88, Safari 13.1). The new shape() function from CSS Shapes 2 is Chrome 116+ and Safari 17.4+ — partial support in 2026, so generate polygon() as the canonical output and add shape() as a progressive enhancement only for sites with a modern audience.

    Internet Explorer never supported clip-path. Microsoft retired IE in June 2022; if your analytics show under 0.5% IE traffic (typical in 2026), use clip-path without a fallback. For the rare site that still serves IE traffic (some government and Asia-region B2B), provide a rectangular fallback with a CSS feature query.

    Common gotchas

    • Box shadows are clipped too. A box-shadow on a clipped element appears inside the clip path, not extending outward. Use filter: drop-shadow() on a wrapping element if you need the shadow to follow the clipped silhouette.
    • Hover events still respect the original rectangle. CSS clip-path only changes paint — the click target is still the original rectangle. To make hover follow the visible shape, use shape-outside on the element or a transparent SVG overlay.
    • Animating clip-path is fast. Modern browsers GPU-accelerate clip-path animations. Animating between two polygon() shapes only works when both have the same number of vertices.
    • Children that overflow the clip are still clipped. A child element positioned outside the clip path is invisible, even if it has position: absolute. To “break out” of the clip, the child must live outside the clipped element entirely.
    • SVG-style fill-rule: for self-intersecting polygons, the default rule is nonzero. Use polygon(evenodd, ...) for the alternate fill rule when you have a knot or figure-8 shape.
    • Mobile Safari has historical bugs. Clip-path on a transformed element used to flicker on iOS 12 and earlier — fixed in iOS 13 and now stable. If you support iOS 12, test before deploying complex animations.

    When NOT to use clip-path

    For complex shapes with curves and gradients (think: a logo, illustration, or character silhouette), use SVG with the actual paths inline — clip-path is for relatively simple geometric outlines on rectangular content. For animated reveal effects across many elements, CSS masking (mask-image) plus an SVG mask gives you finer control. For extracting a non-rectangular region from an image where the result is the new image, use a raster crop tool — clip-path doesn’t change the underlying file, just how the browser paints it.

    Frequently asked questions

    Can I animate clip-path?

    Yes — modern browsers GPU-accelerate clip-path animations. Animating between two polygon() shapes works when both have the same vertex count. Different shape types (polygon to circle) need a path-conversion approach via the new shape() function or a JavaScript animation library.

    Does clip-path work in all browsers in 2026?

    Yes for the four core functions (polygon, circle, ellipse, inset). The path() function works in Chrome 88+ and Safari 13.1+. The new shape() function is partial — Chrome 116+ and Safari 17.4+. Generate polygon() as canonical output and use shape() as progressive enhancement.

    How do I make a clipped image clickable on the visible region only?

    By default the click target is the rectangular bounding box. To restrict clicks to the visible shape, use shape-outside with the same path or layer a transparent SVG with the actual path on top of the image, taking the click via the SVG.

    What’s the difference between clip-path and mask-image?

    clip-path uses geometric shape functions and produces hard edges; mask-image uses an image (typically PNG or SVG) and supports soft edges, gradients, and complex artwork. For a hexagon avatar, use clip-path. For a logo silhouette mask, use mask-image.

    Why does my box-shadow disappear with clip-path?

    Because clip-path clips the entire painted output, including shadows. The fix: wrap the clipped element in a parent and apply filter: drop-shadow() to the parent. drop-shadow follows the clipped silhouette, unlike box-shadow which uses the rectangular box.

    Is my data uploaded?

    No. The generator runs in your browser. The shape coordinates and the demo image you upload to test live only in your tab — they’re never sent to our servers.

    Related tools and guides

     

  • RGB to HEX Converter: Convert Any Color [2026]

    RGB to HEX Converter: Convert Any Color [2026]

    TL;DR: RGB to HEX conversion takes a color expressed as three 0–255 channels (red, green, blue) and outputs a 6-digit hexadecimal code prefixed with #. rgb(99, 91, 255) becomes #635BFF. With an alpha channel, you get an 8-digit HEX: rgba(99, 91, 255, 0.5) → #635BFF80. Our free RGB to HEX converter handles all common formats — RGB, RGBA, HSL, HSV, CMYK, OKLCH — with a live colour swatch, WCAG contrast scores, and named-colour matching.

    Web designers convert colours between RGB and HEX dozens of times a week. A designer hands you an RGB triplet from Figma; a stylesheet uses HEX; a UI library expects HSL; a print spec demands CMYK. Every framework picks its favourite and assumes you’ll convert the rest. Mental math works for greyscale (rgb(255,255,255) = #FFFFFF) but fails for anything in between — converting 91 to 5B in your head is a recipe for typos.

    Our RGB to HEX converter handles every direction (RGB ↔ HEX ↔ HSL ↔ HSV ↔ CMYK ↔ OKLCH), preserves alpha channels correctly, and shows a large colour preview alongside every value. Each output also includes the WCAG contrast ratio against pure black and pure white, so you can rule out colours that fail accessibility audits in one glance. This guide covers exactly how the conversion works, why 8-digit HEX matters in modern CSS, and the gotchas that turn a perfect conversion into a wrong one.

    Format reference: RGB, HEX, HSL, OKLCH

    Format Example Best for
    HEX (6-digit) #635BFF Brand colours, opaque CSS, copy-paste from Figma
    HEX (8-digit, with alpha) #635BFF80 Translucent overlays — same brevity as HEX
    RGB rgb(99, 91, 255) Programmatic generation, design tools
    RGBA rgba(99, 91, 255, 0.5) Translucent fills with explicit alpha
    HSL hsl(243, 100%, 68%) Dynamic shade adjustments (modify L only)
    HSV / HSB hsv(243, 64%, 100%) Photoshop / Sketch picker workflow
    CMYK cmyk(61%, 64%, 0%, 0%) Print specs only — never web
    OKLCH oklch(56% 0.27 270) Modern CSS, perceptually-uniform palettes

    How the math works

    RGB to HEX is a straight base-10 to base-16 conversion of three numbers, padded to 2 digits each:

    // rgb(99, 91, 255) → #635BFF
const toHex = (n) => n.toString(16).padStart(2, "0").toUpperCase();
const hex = `#${toHex(99)}${toHex(91)}${toHex(255)}`;
// → "#635BFF"

    For 8-digit HEX with alpha, append a fourth pair scaled from 0–1 to 0–255: 0.5 × 255 = 127.5 → rounds to 128 → 0x80. Result: #635BFF80. Note that 8-digit HEX with alpha is widely supported (Chrome 62+, Firefox 49+, Safari 9.1+) — well over 95% of users in 2026 — so you can safely replace rgba(...) with 8-digit HEX in modern stylesheets.

    How to convert RGB to HEX in your browser

    1. Open the RGB to HEX converter
    2. Pick the colour with the visual picker, OR type a value in any format
    3. All other formats update in real time below the input
    4. Copy any result with one click; the colour preview matches what you’ll get on screen
    5. WCAG contrast scores against black and white show inline — useful for accessibility checks

    3-digit HEX shorthand and when it works

    CSS allows #FFF as shorthand for #FFFFFF, and #F0A for #FF00AA. Each digit duplicates: #ABC means #AABBCC. This works only when each channel pair has identical digits — #635BFF (no duplicate pairs) cannot be expressed in 3-digit form. The shorthand also has a 4-digit alpha variant: #FFF8 means #FFFFFF88 — an alpha of 0x88 (about 53%).

    Most minifiers expand 3-digit HEX to 6-digit during build, then the gzipped output ends up similar size. Don’t write code that depends on the format — semantically #FFF and #FFFFFF are identical.

    Common gotchas

    • HEX is case-insensitive but lowercase is conventional in CSS. #635BFF and #635bff render identically. Modern style guides (Airbnb, Google) lowercase by default; some teams uppercase for visual contrast against text.
    • Browser colors object accepts named colours. red → #FF0000, cornflowerblue → #6495ED. Our converter recognises all 147 CSS named colours and shows the matching name where one exists.
    • HSL is not perceptually uniform. Two HSL colours with identical L (lightness) can look very different in brightness — yellow at L=50% looks much brighter than blue at L=50%. Use OKLCH if you want perceptually-uniform palettes.
    • CMYK conversion is approximate. RGB and CMYK have different gamuts (printers can’t reproduce all RGB colours, and vice versa). Our CMYK output is a naive conversion, not an ICC-profile-based one. For print specs, pick CMYK in Adobe Illustrator with the right profile loaded.
    • Alpha precision differs. rgba(255,0,0,0.5) rounds to #FF000080, but 0.5 × 255 = 127.5 rounds up. Round-tripping #FF000080 back gives 0.502. The 1-in-256 quantisation is invisible to the eye.
    • OKLCH chroma maxes out around 0.4. Higher values either clamp to the gamut or produce out-of-gamut colours (which browsers display as the closest in-gamut equivalent). Our converter shows when an OKLCH value exceeds the sRGB gamut.

    When NOT to use a converter

    For programmatic conversion in code, use the language-native API: CSS Color Module 4 in modern browsers (CSS.color()), Color.js or chroma.js for batch conversion, or color npm for Node.js. For design tools (Figma, Sketch, Adobe XD), the built-in colour picker handles every conversion natively. Use this browser tool for one-off conversions, accessibility audits, brand-spec verifications, and learning the relationship between formats.

    Frequently asked questions

    What’s the difference between RGB and HEX?

    Same colour, different notation. RGB writes the three channels as decimal numbers (0–255 each) separated by commas. HEX concatenates the same three channels as 2-digit hexadecimal numbers prefixed with #. rgb(99, 91, 255) and #635BFF are identical to the browser.

    Can HEX represent transparency?

    Yes — 8-digit HEX includes an alpha channel as the last 2 digits. #635BFF80 is #635BFF at roughly 50% opacity. 8-digit HEX is supported in all modern browsers (Chrome 62+, Firefox 49+, Safari 9.1+) and in CSS Modules 4, so prefer it over rgba() for translucent values.

    Why does my converted HEX look slightly off?

    Probably alpha quantisation — converting rgba(R,G,B,0.5) to HEX rounds 127.5 to 128 (0x80), and back-conversion gives 0.502. The 1-in-256 step is invisible to the eye. If colours look different by more than a single shade, the issue is gamut conversion (RGB to CMYK or OKLCH out-of-gamut), not arithmetic.

    Should I use HEX, RGB, or HSL in my CSS?

    HEX for opaque brand colours (most concise). 8-digit HEX or rgba() for translucency. HSL when you want to dynamically adjust lightness with calc() or CSS variables. OKLCH for new design systems where perceptual uniformity matters. All work everywhere — pick what reads best in your codebase.

    Is my colour data uploaded?

    No. The converter runs in your browser via JavaScript. Colour values you enter never leave your device.

    What’s OKLCH and why do designers use it?

    OKLCH is a perceptually-uniform colour space (defined in CSS Color Module 4). Lightness, chroma, and hue map to how the eye perceives them — adjust L by 10% and the colour looks 10% lighter regardless of hue. HSL doesn’t have this property: yellow at L=50% looks much brighter than blue at L=50%. OKLCH is supported natively in Chrome 111+, Safari 15.4+, Firefox 113+ — production-safe in 2026.

    Related tools and guides

     

  • Lorem Ipsum Generator: Placeholder Text in Seconds [2026]

    Lorem Ipsum Generator: Placeholder Text in Seconds [2026]

    TL;DR: A lorem ipsum generator produces placeholder text — sentences and paragraphs of fake-Latin filler — for design mockups, layout prototyping, and content-shaped void filling. Our free lorem ipsum generator outputs by paragraphs, sentences, or word count, with optional HTML markup (<p> wrappers) for direct paste into a CMS, and the canonical “lorem ipsum dolor sit amet” opening or randomised text.

    Lorem ipsum has been the design industry’s placeholder text since the 1500s, when an unknown printer adapted a 45 BC philosophy treatise by Cicero — De finibus bonorum et malorum — into nonsense Latin to demonstrate typesetting fonts without distracting readers with real content. Five centuries later, every CMS, design tool, and front-end mockup still leans on it. The reason it stuck: real content distracts. When you’re showing a client a layout, you want them looking at the layout, not reading the words.

    Our lorem ipsum generator outputs by paragraph count, sentence count, or word count, with options for HTML wrapping, randomised vs. canonical opening, and instant copy. This guide explains the right and wrong uses of placeholder text, the alternatives worth considering, and the gotchas that lead to “lorem ipsum” accidentally shipping to production (it has happened — embarrassingly — at multiple Fortune 500 companies).

    What lorem ipsum actually says (and why it doesn’t matter)

    The canonical first sentence — “Lorem ipsum dolor sit amet, consectetur adipiscing elit” — is a corruption of Cicero’s “Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit”. The original translates roughly to “There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain”. The placeholder version is gibberish — words have been chopped, jumbled, and elongated into nonsense.

    That nonsense is the point. Lorem ipsum’s job is to occupy visual space without drawing reader attention. Real content immediately triggers comprehension instincts; the reader starts thinking about the message. Pseudo-Latin defeats that instinct — your brain registers “text-shaped” without engaging with meaning. Designers can evaluate typography, hierarchy, line-length, and rhythm without the user (or the client) getting distracted by what the text says.

    Five legitimate uses of lorem ipsum

    • Wireframes and mockups. Before content is written, designers fill body areas with lorem ipsum to show structure. The whole point of a wireframe is to communicate layout independently of content.
    • Stress-testing typography. Real content rarely fills the worst-case scenarios — extra-long paragraphs, missing line breaks, weird character combinations. Lorem ipsum stretches across the layout reliably for QA.
    • CMS template development. Building a WordPress theme or design system component? Lorem ipsum demonstrates how the template handles arbitrary text without exposing real client data during development.
    • Print-design proofing. Magazine layouts, brochures, and editorial designs test column flow with lorem ipsum before final copy lands.
    • Email template testing. Email clients render unpredictably; testing with lorem ipsum across Gmail/Outlook/Apple Mail catches breakage before real campaigns send.

    How to use the browser lorem ipsum generator

    1. Open the lorem ipsum generator
    2. Choose unit: paragraphs, sentences, or words
    3. Set quantity (1-50 paragraphs, 1-100 sentences, 1-1000 words)
    4. Toggle “Start with Lorem ipsum dolor sit amet…” for the canonical opening, or leave off for randomised
    5. Toggle “Wrap in HTML” to get <p> tags around each paragraph (paste-ready for CMS visual editors that don’t auto-wrap)
    6. Click Copy to grab the generated text, or Generate again for a fresh sample

    The output is generated client-side by selecting from a curated word list and assembling sentences with realistic Latin-like punctuation distribution. Nothing transmits to a server.

    Lorem ipsum alternatives — when filler text needs personality

    Alternative Vibe When to use
    Bacon Ipsum Meat-themed (bacon, prosciutto, t-bone) Restaurant menus, food brands
    Hipster Ipsum Brooklyn-flavour adjective stew Trendy startup mockups
    Corporate Ipsum Synergize-leverage-ROI buzzwords B2B SaaS pitch decks
    Cupcake Ipsum Sugar/dessert words Bakery, candy, kid-targeted designs
    Real content Actual draft copy Anything past initial wireframe — content shapes design

    Themed alternatives are fun for early-stage mocks but should never be left in production. They draw attention to themselves the way real lorem ipsum doesn’t, and clients tend to comment on them rather than the design.

    The “lorem ipsum shipped to production” hall of fame

    Lorem ipsum makes it to production websites surprisingly often. Search “lorem ipsum site:nytimes.com” or any major brand domain on Google and you’ll find archived examples. Common scenarios:

    • Form-field placeholders — the “Enter your email” placeholder in a signup form gets replaced with “Lorem ipsum” and ships.
    • Image alt text — accessibility audits surface lorem ipsum alt attributes on production marketing images.
    • Empty CMS fields — a category page renders lorem ipsum because the editor never wrote real introductory text.
    • Email signatures — corporate email templates with placeholder paragraphs still in them, sending to real customers.
    • Mobile app onboarding screens — the third onboarding step’s body text never got written, lorem ipsum ships in the app.

    Every team that has shipped lorem ipsum to production swears they have a “before-launch checklist” now. Search-and-replace for “lorem ipsum” across your codebase before deploys.

    Generating lorem ipsum in code

    Node.js (lorem-ipsum npm package):

    import { LoremIpsum } from "lorem-ipsum";

const lorem = new LoremIpsum({
  sentencesPerParagraph: { max: 8, min: 4 },
  wordsPerSentence: { max: 16, min: 4 },
});

console.log(lorem.generateParagraphs(3));

    Python (lorem package):

    import lorem
print(lorem.paragraph())   # one paragraph
print(lorem.text())         # multiple paragraphs

    VS Code shortcut (Emmet):

    // In any HTML file, type "lorem" + Tab → 30 words of lorem ipsum
// Or specify count: "lorem50" → 50 words

// Wrap in elements:
// p*3>lorem  → 3 paragraphs each containing lorem ipsum

    Common mistakes with lorem ipsum

    • Using it past wireframe stage. Once visual design is approved, lorem ipsum should be replaced with real content. Designs that look great with placeholder text often break with real content (longer headlines, shorter body copy, missing data).
    • Forgetting it in CSS comments or hidden fields. “Lorem ipsum” sometimes lurks in CSS comments or HTML attributes that don’t render but show up in search results or developer-tool inspections.
    • Letting it indicate quality. A product page with three perfectly-typeset paragraphs of lorem ipsum looks like a finished product to your eye. Real content of the same length might be three short bullet points and an FAQ. Test designs against realistic content shapes, not idealised paragraphs.
    • Using English-language lorem ipsum. Some “lorem ipsum” alternatives are actually English nonsense words. They’re harder to ignore — your brain auto-parses them — defeating the purpose. Stick with Latin-style for layout work.

    When NOT to use lorem ipsum

    • For final-stage user testing. Test with realistic content. Users react differently to “Lorem ipsum dolor” than to “Track your medication, set reminders, share with your doctor”.
    • For accessibility testing. Lorem ipsum’s punctuation and word-length distribution doesn’t match real screen-reader experience. Test with real content for accessibility.
    • For SEO content audits. Lorem ipsum has zero topical relevance and zero search potential. Don’t analyse search performance against placeholder text.
    • For client previews on a launched site. Lorem ipsum on a live URL looks unprofessional. Use a staging environment.

    Frequently asked questions

    Does lorem ipsum text mean anything?

    The canonical lorem ipsum is a corruption of Cicero’s De finibus bonorum et malorum from 45 BC, scrambled in the 1500s by an anonymous printer. Words were chopped, reordered, and altered into pronounceable nonsense. There’s no meaningful translation — that’s intentional. The text exists to occupy visual space without engaging the reader’s comprehension.

    How much lorem ipsum should I generate for a typical mockup?

    For body content, 50-100 words per paragraph and 2-4 paragraphs per section. For headlines, 5-12 words. For meta descriptions, ~25 words (matches Google’s snippet length). The goal is matching realistic content shape, not maximum filler.

    Will Google penalise pages containing lorem ipsum?

    Not directly — Google doesn’t single out lorem ipsum for penalty. But pages with lorem ipsum almost universally have other quality issues (thin content, no real value, draft state) that Google’s algorithm penalises. Lorem ipsum is a symptom, not a cause. Search Console may surface “lorem ipsum dolor” as a query you’re ranking for, which is embarrassing but not dangerous.

    Can I use lorem ipsum commercially?

    Yes. Lorem ipsum is in the public domain — Cicero died over 2000 years ago, and the modern corruption has been used continuously since the 1500s. No copyright applies. Use it freely in any commercial design work or product.

    What’s the best length for lorem ipsum in a wireframe?

    Match real content. If your real article will be 800 words, generate 800 words. If your hero subhead will be 8-12 words, generate 8-12. Designs that look balanced with the wrong filler length break when real content arrives. Always test against realistic content shape.

    Is the lorem ipsum generator generated locally?

    Yes. The text is assembled in your browser using a curated word list. No requests are made to any server. Verify in DevTools Network tab — there are no API calls when you click Generate.

    Related tools and guides