Can I edit the SVG after generating?

Yes — plain SVG markup. Edit in text editor, change fills, adjust shapes inside pattern. Or import into Figma/Illustrator.

No. Generator runs in your browser. Selections and exports stay on your device.

No. Converter runs in your browser. SVG processed locally.

No. Generator runs in your browser. Blob shape, seed, exports stay on your device.

Tag: Image Tools

Image Filters Online: Free Browser Photo Effects [2026]

TL;DR: An online image-filter tool applies CSS-style adjustments — brightness, contrast, saturate, hue-rotate, blur, sepia, grayscale — and prebuilt presets (vintage, cool, warm, fade) to any photo, in your browser. Useful for quick blog hero images, social posts, and matching photos to a brand palette without opening Photoshop. Our free image filter tool runs the entire pipeline on the canvas in your browser, exports the filtered image as PNG/JPG/WebP, and copies the equivalent CSS filter declaration so you can apply the same effect live in your stylesheet.

Reaching for Photoshop or Lightroom for a quick photo tweak is overkill when all you need is a brightness boost, a sepia tint, or a quick fade for a blog header. Mobile apps like Snapseed and VSCO solve this on phones; the equivalent for desktop work is a browser tool with the same set of named effects. CSS specifies all the basic image filters — brightness(), contrast(), saturate(), blur(), sepia(), grayscale(), hue-rotate(), invert(), opacity(), drop-shadow() — and most browsers render them at GPU speed.

Our image filter tool exposes every CSS filter as a slider plus 24 prebuilt presets (vintage, cool, warm, fade, sepia, B&W, dramatic, polaroid, and more). Drop an image, drag sliders or click a preset, export the filtered image as PNG/JPG/WebP. The tool also outputs the equivalent CSS filter: declaration — useful when you want to apply the filter in CSS (live, no rendered file) instead of baking it into the image. This guide explains every filter, the preset presets, and the gotchas with hue-rotate and saturate that produce unexpected results.

All 10 CSS filter functions

Filter	Range	What it does
`brightness(0–2)`	0% to 200%+	Linearly scales the intensity of every pixel
`contrast(0–2)`	0% to 200%+	Spreads pixel values away from mid-grey
`saturate(0–2)`	0% to 200%+	0% = grayscale; 200% = oversaturated
`grayscale(0–1)`	0% to 100%	Mixes original and luminance-only versions
`sepia(0–1)`	0% to 100%	Brown-tinted aging effect
`hue-rotate(0–360deg)`	0° to 360°	Spins all colours around the colour wheel
`invert(0–1)`	0% to 100%	Inverts pixel values (negative effect)
`blur(0–20px)`	0px to 20px+	Gaussian blur — soften details
`opacity(0–1)`	0% to 100%	Fade entire image to transparent
`drop-shadow()`	x / y / blur / colour	Shadow that follows non-rectangular silhouettes

24 prebuilt presets — what each one does

Filters compose. Stacking contrast(110%) saturate(140%) sepia(20%) produces the “Polaroid” look. Our presets are tuned versions of those compositions:

Vintage: warm sepia with reduced saturation and slight contrast boost — instagram circa 2012
Cool: blue hue shift and increased contrast — winter photography
Warm: orange/yellow tint and slight saturation — sunset feel
B&W: grayscale with contrast boost — photojournalism look
Fade: reduced saturation and contrast — film fade
Sepia: classic 100% sepia tint
Polaroid: warm tint, soft contrast, slight grain
Dramatic: high contrast + saturation
Forest: green-shifted hue + saturation
Sunset: orange-shifted hue + warm tint
Night: deep blue + reduced brightness
Lo-fi: pixel-soft blur + saturation
… 12 more available in the dropdown

How to filter an image in your browser

Open the image filter tool
Drop an image (JPG, PNG, WebP, HEIC supported)
Click a preset to apply, or drag individual filter sliders
Watch the live preview update — every change is canvas-rendered in real time
Click Export for PNG/JPG/WebP at 1× / 2× / 4× resolution
Or click Copy CSS to copy the equivalent filter: declaration for live styling

CSS filter vs baked-in filter — when to pick which

Two output options matter for different workflows:

Bake into image: the filter is applied to the pixels, the image is exported as PNG/JPG. Use when you’re publishing to a CMS, social media, or anywhere the image lives independently of styling. The filter is permanent.
Copy as CSS: the original image stays untouched and you apply the filter via img { filter: contrast(120%) saturate(110%); } in your stylesheet. Use when you want one source image to render different ways across themes (light/dark mode, hover states, etc.). The filter is reversible — change the CSS and the image looks different without re-uploading.

For a photo gallery with hover effects, use CSS. For an image you’ll embed in a tweet or attach to an email, bake it in.

Common gotchas

Hue-rotate isn’t perceptually uniform. Rotating hue by 60° shifts red to yellow, but the same 60° shift from blue lands in purple — the wheel isn’t uniform. Use the visual preview, don’t pick angles by intuition.
Brightness above 100% can clip highlights. Once a pixel hits #FFFFFF it stops getting brighter, and details in the highlights are lost forever. Pull contrast down before pushing brightness up if you want to preserve detail.
Blur slows older devices. Gaussian blur with radius >10px on a 4000×3000 image can briefly stall the page on a 5-year-old mobile. Resize the image first if performance matters.
Grayscale isn’t desaturate. grayscale(100%) uses Rec. 709 luminance weights (red 21%, green 72%, blue 7%); saturate(0) uses an HSL-style desaturation. The two produce subtly different greys for the same input.
Drop-shadow follows transparency. Unlike box-shadow, drop-shadow() respects PNG alpha channels — perfect for product photos with transparent backgrounds. JPEG inputs don’t have alpha, so the shadow shows the rectangular outline.
Sepia at 100% destroys colour information. Once an image is fully sepia-toned, you can’t recover the original colours from the output. Always keep your original — bake the filter into a copy.

When NOT to use this tool

For photography retouching (skin smoothing, dodge/burn, layered adjustments), use Lightroom, Photoshop, or Affinity Photo — CSS filters can’t do localised edits. For colour grading a video sequence, use a video editor with proper LUT support (DaVinci Resolve, Premiere). For batch processing 100s of files, install sharp or ImageMagick and write a script — much faster than running each through a browser tool. For HDR or 16-bit colour work, browsers run filters in 8-bit RGB and can lose precision.

Frequently asked questions

Does this support PNG alpha channels?

Yes. PNG transparency is preserved through every filter. Drop-shadow specifically follows the alpha channel — useful for product photos on transparent backgrounds. JPEG inputs don’t have alpha; everything outside the photo is treated as fully opaque.

Can I export to WebP?

Yes — the export menu offers PNG (lossless, alpha), JPG (lossy, no alpha), and WebP (modern compression, alpha supported). Pick PNG for graphics with transparency, JPG for photos, WebP for the smallest file when modern browser support is acceptable.

Will the filtered output match what I see in CSS?

Yes — we use the same canvas filter API browsers use for the CSS filter property, so the rendered output is byte-identical to what your stylesheet would produce on a browser of the same version. Older browsers may render slight differences in blur kernels.

Can I apply multiple filters at once?

Yes — every slider is independent and they all stack. The preview shows the cumulative effect; the exported CSS lists each filter in order (filter: brightness(110%) contrast(120%) sepia(20%)). The order matters slightly — earlier filters are applied first.

Is my image uploaded?

No. The tool runs canvas filters in your browser. The image is loaded into a blob URL and processed locally — never uploaded.

What’s the resolution limit?

Effectively your browser’s available canvas memory. Desktop browsers handle 8000×6000 (48 MP) images comfortably; mobile is more limited (around 4000×3000). Heavy filters like blur slow down on large inputs — resize first if you don’t need full resolution.

Related tools and guides

May 9, 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:

Pick k initial cluster centres at random (or via k-means++ for better starting points)
Assign every pixel to the nearest centre
Recompute each centre as the average of the pixels assigned to it
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

Open the image color extractor
Drop an image (JPG, PNG, WebP, HEIC supported)
Pick the colour count (2–12)
The palette appears in 1–3 seconds with each swatch labelled by HEX and percentage of the image
Toggle Sort by percentage or Sort by hue
Click any swatch to copy its HEX, RGB, HSL, or OKLCH
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

May 5, 2026

Image to Base64 Converter: Data URL Encoder [2026]

TL;DR: An image-to-Base64 converter encodes any image (PNG, JPG, WebP, SVG, GIF) as a Base64 string and wraps it in a data:image/;base64,... URL, ready to paste into HTML src, CSS url(), or JSON. Use it for inline icons under 4 KB, email templates that demand inline assets, and small SVGs that don’t justify a network request. Our free image-to-Base64 converter runs entirely in your browser — drag and drop any image, copy the result.

A Base64 data URL inlines an image directly into HTML, CSS, or JSON. Instead of <img src="logo.png"> with a network request, you write <img src="data:image/png;base64,iVBORw0KGgo..."> and the image is part of the document. That eliminates the round-trip — useful for tiny icons in critical CSS, email templates that demand inline assets (Gmail blocks externally-hosted images by default), and JSON payloads where a separate file isn’t an option (push notifications, web push payloads, embedded widget configs).

Our image to Base64 converter handles every common format, runs in your browser (the file never uploads), and gives you four output shapes — raw Base64, full data URL, CSS url(), and HTML <img> tag. This guide covers when inlining is the right call (often it isn’t), the size overhead (~33%), and the gotchas with caching, gzip, and font-icon migration.

When to inline an image as Base64 — and when not to

Use case	Inline as Base64?	Why
Icon under 4 KB in critical CSS	Yes	Saves a request on the critical path
HTML email template	Yes (often required)	Most clients block external images by default
Large hero image (> 50 KB)	No	Inflates HTML, blocks parsing, no CDN caching
Image used on every page	No	External file caches once, serves N times
SVG icon set used 5+ times per page	Maybe — try SVG sprite first	Sprite sheets compress better than per-icon Base64
Embed widget configuration JSON	Yes	JSON can’t reference external files
Push notification icon	Yes	Browser push payloads are limited and need self-contained data

The 33% size penalty

Base64 encodes 3 raw bytes as 4 ASCII characters. That’s a 33% size overhead before any other effects. A 12 KB PNG becomes a ~16 KB Base64 string. For text-mode HTTP responses (HTML, CSS, JSON), gzip compresses the Base64 string back down — typically to within 5–8% of the original binary size. So the true overhead in a gzipped HTTP response is small.

What gzip can’t fix: Base64-inlined assets are part of the HTML, so they block the HTML parser longer. They can’t be cached separately by the browser — every page load redownloads the whole HTML including the inline image. For an icon shown on every page, this trades a one-time round-trip for a recurring kilobyte penalty. Run the math.

How to convert an image to Base64

Open the image to Base64 converter
Drop your image, click to pick a file, or paste from clipboard
The converter detects the MIME type automatically (image/png, image/jpeg, image/svg+xml, etc.)
Pick output format: Raw Base64, Data URL, CSS url(), or HTML <img> tag
Click Copy — paste into your HTML, CSS, or JSON

Output shapes — paste-ready for every context

The same image produces four different output strings depending on where you’ll paste it:

// Raw Base64
iVBORw0KGgoAAAANSUhEUgAA...

// Data URL — works in HTML src, CSS url(), JS Image()
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

// CSS url()
.icon { background: url("data:image/png;base64,iVBORw...") no-repeat; }

// HTML img tag
<img src="data:image/png;base64,iVBORw0KGgo..." alt="...">

Common gotchas

SVGs can be inlined more efficiently as URL-encoded SVG. Instead of data:image/svg+xml;base64,... use data:image/svg+xml;utf8,... with URL-encoded SVG markup. The result is smaller (no Base64 overhead) and gzip-compresses better. Most modern browsers support both forms.
Don’t inline JPEGs above ~10 KB. The Base64 string bloats your HTML by 33%, blocks the parser, and the savings from one fewer request are negligible compared to the parsing cost. Use a CDN.
Gmail strips inline Base64 PNGs above 4 KB in some cases. Email-client behaviour varies wildly; test with Litmus or Email on Acid before mass-mailing a campaign that depends on inline images.
CSP headers may block data URLs. A Content Security Policy with img-src: 'self' blocks data: URLs. Add data: to img-src if you use inline images: img-src 'self' data:;.
Don’t inline animated GIFs as Base64. Encoded GIF blobs are huge (often 100 KB+ for a 5-second clip), and most email clients render the first frame only anyway. Use a hosted MP4 or animated WebP for non-email contexts.
Build pipelines do this automatically. Webpack’s asset/inline, Vite’s ?inline import suffix, and Next.js’s next/image all auto-inline assets below a threshold. For a real codebase, configure that threshold in your bundler instead of running this tool by hand.

When NOT to use this tool

If your build pipeline (Webpack, Vite, Parcel, Next.js, Astro) handles inlining automatically — set the threshold in your bundler config and trust it. For batch automation in CI, write a Node script that reads the image and outputs the data URL — no browser needed. For SVG-heavy use, prefer SVG sprite sheets or inline <svg> markup over data URLs — they compress better and remain editable. Use this browser tool for one-off conversions, email templates pasted into Mailchimp/SendGrid, embed-widget config files, and learning what a data URL looks like.

Frequently asked questions

What’s the file size limit?

Effectively your browser’s available memory. Conversion is fast for files up to several MB. Above 10 MB the Base64 string itself becomes unwieldy to paste. There’s no point inlining an image that large — use a CDN.

Why does my Base64 string differ between tools?

Same input bytes always produce the same Base64. Differences come from MIME type detection, line-break formatting (some tools insert \n every 76 characters per RFC 2045; modern tools output unbroken strings), or trailing padding. The encoded image bytes are byte-identical.

Will inlining help my page load faster?

For tiny critical-path images (under 4 KB, used once), yes — saves a network round-trip. For images used on multiple pages or above 10 KB, no — you bloat HTML with no caching, which is usually worse than a single fetch. Test with Lighthouse before committing.

Does this work for SVGs?

Yes, but a URL-encoded SVG (data:image/svg+xml;utf8,...) is usually smaller than Base64. Our converter offers both forms — pick “URL-encoded” for SVGs to save a few bytes.

Is my image uploaded?

No. The converter runs in your browser using the FileReader API. The image is loaded into memory and encoded locally — it never leaves your device. You can verify in the Network tab: dropping a file produces zero outbound requests.

Can I decode Base64 back to an image?

Yes — paste a data URL into the converter and toggle “Decode mode”. The original image is reconstructed and offered as a download. Useful for inspecting an inlined asset you want to extract from a page.

Related tools and guides

May 5, 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

Open the SVG pattern generator
Pick a shape from the gallery (60+ options across 5 categories)
Adjust tile size, foreground color, background color, and density
Watch the live preview render the seamless tile
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

May 5, 2026

Instagram Filters in CSS: Clarendon, Gingham, More [2026]

TL;DR: Instagram’s classic filters (Clarendon, Gingham, Moon, Lark, Reyes, Juno, etc.) can be approximated in CSS by stacking filter properties — contrast, saturate, hue-rotate, sepia — with carefully tuned values per filter. The output isn’t pixel-identical to Instagram’s proprietary algorithms, but it captures the look closely enough for previews, demo apps, and design mockups. Our free Instagram filters tool ships 30+ filter presets, applies them to any image in your browser, and copies the equivalent CSS.

Instagram launched its filter library in 2010, popularising the now-iconic looks: Clarendon (cool, high-contrast), Gingham (vintage warm), Moon (dramatic black-and-white), Lark (high-saturation outdoor), Reyes (faded warmth), Juno (warm and saturated). Instagram’s actual implementations are proprietary GPU shaders. CSS approximations using filter functions get close to the look — close enough that web designers use them to mimic Instagram’s aesthetic in their own UIs.

Our Instagram filters in CSS tool ships 30+ tested filter approximations. Drop an image, click a filter to preview, copy the CSS or export the filtered image as PNG. Useful for: feed-style mockups, photo galleries with consistent filter looks, hover effects that mimic Instagram, demo apps showing “before/after” filter comparisons. This guide explains how the CSS approximations work, where they fall short of Instagram’s real shaders, and the gotchas with hue-rotate.

CSS approximations of classic filters

Filter	CSS approximation	Aesthetic
Clarendon	`contrast(120%) saturate(125%)`	High-contrast cool tones
Gingham	`contrast(90%) brightness(105%) sepia(8%)`	Faded vintage warmth
Moon	`grayscale(100%) contrast(110%) brightness(110%)`	Dramatic B&W
Lark	`contrast(95%) saturate(110%) brightness(110%)`	Outdoor / nature
Reyes	`sepia(22%) brightness(110%) contrast(85%) saturate(75%)`	Faded warm
Juno	`saturate(130%) contrast(105%) hue-rotate(-10deg)`	Warm + saturated
Walden	`brightness(110%) hue-rotate(-10deg) sepia(30%) saturate(160%)`	Bright yellow-tint
1977	`contrast(110%) brightness(110%) saturate(130%) sepia(50%)`	Faded film, retro

Why CSS approximations aren’t exact

Instagram’s filters are GPU shaders that operate per-pixel with custom curves, masks, and blend modes. CSS filter functions (contrast, saturate, hue-rotate, sepia) are simpler linear or per-channel transforms. The differences:

Tone curves: Instagram applies S-curves and custom tone-mapping that CSS can’t do directly. Our approximations use linear contrast/brightness, which gets close but not pixel-identical.
Per-channel adjustments: Real filters often boost reds and dampen blues separately. CSS can do hue-rotate (rotate all hues equally) but not selective per-color editing.
Lookup tables (LUTs): Many real filters use 3D LUTs to map every input color to an output color. CSS has no equivalent.
Blend modes: Instagram filters layer on tints with screen / multiply / overlay blend modes. CSS supports mix-blend-mode but only on stacked elements, not on the image itself directly.

For a 95% accurate match in the browser, our approximations are the practical limit. For pixel-exact reproduction, use a dedicated image-processing library (Pixi.js, GLFX) with custom GLSL shaders.

How to apply Instagram-style filters

Open the Instagram filters tool
Drop an image (or use one of the demo photos)
Click any filter preset to preview live
Adjust strength slider (0–150% — higher than 100% over-applies the effect)
Click Export to bake the filter into a PNG/JPG, or Copy CSS for the equivalent filter declaration

Common gotchas

The Instagram filter trademarks belong to Meta. Filter names like “Clarendon”, “Gingham”, “Moon” are Meta trademarks. Using them in your own product to label CSS approximations is legally grey — for commercial work, use generic names (“Cool”, “Vintage”, “B&W”) to avoid confusion. Our generator labels them with the recognisable names for educational reference.
Filters change Instagram’s CSS implementations evolve. Instagram has updated filter algorithms several times. Approximations that matched the look in 2018 may not match the 2026 version exactly.
Hue-rotate is unintuitive. Rotating hue by 10° shifts blue toward purple, but the same 10° from yellow lands in green. Test with the actual image — don’t pick angles by intuition.
Filters compound badly. Stacking 3+ filters at full strength produces over-processed output. Real Instagram filters are designed as single composites. Keep filter stacks short and adjust strength globally.
JPEG compression after filtering. Heavy filters (high contrast, high saturation) push pixels into JPEG’s compression-friendly bands, then JPEG compression can’t capture the subtleties. For high-quality output, export PNG and convert to JPEG only at the final step.
CSS filter is render-time, not destructive. Applied via CSS filter: declaration, the original image stays unchanged in the DOM. Apply via canvas (the export path) when you want a permanent change.

When NOT to use CSS Instagram filters

For pixel-exact recreation of Instagram’s filters (e.g., for a competitive analysis), you need either Instagram itself or a dedicated GLSL implementation — CSS can’t reach that fidelity. For commercial product features (“apply Instagram filter to your photo”), use proper trademark-friendly names and don’t mention “Instagram” in your UI without licensing. For batch image processing in CI, use sharp + custom transforms in Node — much faster than running through a browser tool. For animated filter transitions (smoothly cross-fading between filters), use CSS transitions on the filter property — works but limited to functions CSS supports.

Frequently asked questions

Are these the actual Instagram filters?

No — they’re CSS approximations. Instagram’s real filters are proprietary GPU shaders. Our CSS combines contrast, saturate, hue-rotate, sepia, etc. to match the look. Visually similar; not pixel-identical.

Can I use the filter names commercially?

“Clarendon”, “Gingham”, “Moon” etc. are Meta trademarks. For commercial products labelling filter options, use generic names (“Cool”, “Vintage”) to avoid trademark issues. The CSS techniques themselves are open and free to use.

Does it support PNG transparency?

Yes — PNG alpha channels survive every filter. Drop-shadow specifically uses the alpha channel for the silhouette. JPEG inputs don’t have alpha; the rectangular bounding box shows in any drop-shadow.

Can I apply filters in CSS without baking them in?

Yes — that’s the use case for the “Copy CSS” option. Apply via img { filter: contrast(120%) saturate(125%); } in your stylesheet, and the original image stays untouched. Use baking (PNG export) when you want the filter permanent.

Is my image uploaded?

No. Filters apply via canvas in your browser. The image is loaded into a blob URL and processed locally.

Can I create a custom filter?

Yes — use the “Custom” mode and adjust each CSS filter function manually with sliders. Save your settings as a named preset. Useful for matching a brand-specific look across many images.

Related tools and guides

May 5, 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

Open the average color finder
Drop your image (JPG, PNG, WebP, HEIC supported)
The tool computes mean, median, dominant, weighted average — all four — in 1–2 seconds
Pick the metric that fits your use case; copy HEX, RGB, HSL, or OKLCH
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

May 5, 2026

SVG Stroke to Fill Converter: Outline-to-Path [2026]

TL;DR: An SVG stroke-to-fill converter takes paths drawn with stroke="..." + stroke-width="N" and replaces them with filled outline paths that produce identical visual rendering — but as filled regions, not strokes. Necessary for laser cutters, CNC routers, vinyl plotters, embroidery machines, and any pipeline that scales SVGs without honouring stroke-width. Our free SVG stroke-to-fill tool uses the same path-offset algorithms as Inkscape and Illustrator’s “Stroke to Path” command.

SVG paths can be rendered two ways: with a stroke (a line drawn along the path with a configurable width) or as a fill (the area enclosed by the path is filled with colour). Visually they can look identical — a 4px black stroke around a circle and a filled donut shape with the same dimensions render the same. But many pipelines that consume SVG ignore stroke entirely:

Laser cutters (Glowforge, Epilog, AxiDraw): cut along path centerlines, but interpret fill as engraving area. A stroked path may be cut as the path itself with no width.
CNC routers (vCarve, Carbide Create): treat stroke-width as visual decoration, not toolpath geometry.
Vinyl plotters (Cricut, Silhouette): cut along paths; stroke-width has no effect on the cut.
Embroidery digitisers: convert paths to stitches; strokes need explicit fill geometry.
Some printers and PDF generators: round stroke-width to nearest pixel multiple at low DPI.

The fix: convert every stroke to a filled outline path before exporting. Our SVG stroke-to-fill converter does this automatically — paste your SVG, get back a version where every stroked path has been replaced with an equivalent filled outline. The visual rendering is unchanged in browsers but the geometry is now portable across every SVG-consuming pipeline.

When you need stroke-to-fill conversion

Pipeline	Honours stroke-width?	Action
Web browser rendering	Yes	No conversion needed
Print PDF	Mostly	Convert if printing under 100 DPI
Laser cutter (Glowforge, Epilog)	No	Convert before export
CNC router (Shapeoko, Carbide)	No	Convert before export
Vinyl plotter (Cricut)	No	Convert before export
Embroidery (PE-Design)	No	Convert before export
Figma / Illustrator export	Yes	No conversion needed

How the conversion works

The technique is path offsetting. For a path defined by a series of points, the offset path is a new path running parallel to the original at a constant distance (half the stroke-width) on each side. The two offset paths plus the rounded line caps form a closed outline — a filled region equivalent to the stroked line.

Edge cases that need careful handling:

Line caps: butt, round, square. Each requires different geometry at the path endpoints.
Line joins: miter, round, bevel. Where path segments meet, the corners need different treatments.
Self-intersections: a path that crosses itself produces overlapping offset regions that need union-ing.
Bezier curves: the offset of a Bezier isn’t itself a Bezier — it’s approximated with multiple Bezier segments.

Most converters (including ours) use the Clipper library or paper.js’s PathOffset algorithm — the same code Inkscape’s “Stroke to Path” command runs.

How to convert SVG strokes to fills

Open the SVG stroke-to-fill converter
Paste your SVG markup or upload an .svg file
The tool detects every stroked path and converts each to a filled outline
Preview shows before/after side by side — should look visually identical
Click Download for the converted SVG

Common gotchas

Output is bigger. A filled-outline path has more points than the stroked version. File size typically grows 30–80%. For laser/CNC export this is fine; for web rendering, keep the stroked version.
Anti-aliasing differs slightly. Browsers anti-alias strokes differently from filled paths. Visual difference is usually invisible but exists at the pixel level — zoom to 400% and you may see edge differences.
Doesn’t simplify nested groups. If your SVG has nested <g> groups with transforms, the conversion preserves the structure. Some legacy laser-cutter software trips on nested groups; flatten with a separate pass if needed.
Stroke-dasharray becomes dashed filled paths. Dashed strokes (stroke-dasharray) convert to multiple separate filled segments. Visual is correct but the path count multiplies.
Round caps and joins add curve segments. A path with stroke-linecap="round" gets quarter-circle Bezier curves at endpoints in the output. Visual unchanged; geometry slightly more complex.
Variable stroke widths aren’t standard SVG. If you’ve used a non-standard stroke-width-variable extension (Illustrator’s variable-width strokes), the tool can’t reproduce that — it treats stroke-width as constant per path.

When NOT to use this tool

If your destination consumes SVG with full stroke support (modern browsers, Adobe Illustrator, Figma, Affinity), don’t convert — it bloats the file with no benefit. For web SVG, stroke-width is rendered correctly everywhere. For interactive SVG (paths animated with stroke-dasharray for “drawing” effects), don’t convert — you’ll lose the ability to animate the stroke offset. For SVGs you’ll edit later in a vector tool, keep strokes — they’re easier to manipulate than filled outlines. Use this tool only when exporting to a destination that ignores stroke-width.

Frequently asked questions

Why do I need to convert strokes for laser cutters?

Laser cutters cut along path geometry, not stroke decoration. A 4mm-wide stroked line in your design isn’t a 4mm-wide cut — the cutter follows the centerline of the path. To produce a 4mm-wide cut region, the geometry must be a filled 4mm-wide outline shape. Conversion makes the geometry match what the cutter sees.

Will the output look the same in a browser?

Yes — visually identical at typical viewing zoom. Browsers anti-alias strokes and fills slightly differently, so at 400%+ zoom you might see edge differences, but the rendered effect is the same.

Does it support all SVG features?

Most: line caps (butt, round, square), line joins (miter, round, bevel), dashed strokes, miter limits, transforms. It doesn’t handle: variable-width strokes (Illustrator extension), stroke alignment (Inkscape’s stroke-alignment=”inset/outset”), or pattern-based strokes. Those convert with imperfect approximations.

What’s the file-size penalty?

Typically 30–80% larger output. A 12 KB SVG with strokes becomes 18–22 KB after conversion. The growth comes from filled outlines having more path points than centerline strokes, especially with rounded line caps.

Is my SVG uploaded?

No. The converter runs in your browser. SVG markup is processed locally — never sent to our servers.

Can I batch-convert many SVGs?

For one or two files, this tool is fastest. For batch processing (50+ files), use Inkscape’s command line: inkscape --export-type=svg --export-text-to-path --export-area-page --export-stroke-to-path *.svg. Same algorithm, scriptable.

Related tools and guides

May 5, 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

Open the SVG blob generator
Adjust complexity (points), randomness (variance), and size
Pick fill — solid colour, linear gradient, or radial gradient
Click Shuffle for a new random shape, or paste a seed string for a specific one
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

May 4, 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

Open the SVG to PNG converter
Drop your .svg file or paste SVG markup directly
Set the output width and height (preserves aspect ratio by default)
Choose background: transparent (default), white, or custom colour
Optional: tick 1x / 2x / 3x to export multiple retina variants in one go
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

May 4, 2026

Blur Face Online: Photo Censor in Browser [2026]

TL;DR: A photo censor tool covers sensitive parts of a photo — faces, license plates, addresses, screen content — with one of three opaque overlays: pixelation (mosaic blocks), gaussian blur, or black bar. Use a black bar for legal redaction, pixelation for casual face blurring, blur only when readability of the underlying region doesn’t matter. Our free photo censor runs in your browser, supports all three modes, and strips EXIF metadata from the export so location and camera data don’t leak.

Posting a photo online without thinking about who’s in it has become a privacy concern even for casual users. A vacation snap shows a stranger’s child clearly enough to identify them. A street photo includes a license plate. A screenshot of a calendar exposes a colleague’s home address. The fix is mechanical: cover the sensitive region with an opaque overlay before publishing. Done in two minutes; the alternative is removing the photo after someone complains.

Our photo censor handles all three common censoring modes — pixelate, blur, black bar — and lets you brush, drag a rectangle, or click a face for an automatic ellipse. Files never upload — the photo loads into your browser, gets edited locally, and exports with EXIF metadata stripped. This guide covers when to use which mode, the irreversibility of pixelation vs blur, and the photographic gotchas (low-resolution faces, low-blur radius) that have leaked private information in the past.

Censor mode comparison — and which to actually use

Mode	Reversible?	Best for
Black bar	No	Legal redaction, license plates, sensitive text
Pixelate (block 12+)	No (irreversible at high enough block size)	Faces in social photos, casual blurring
Gaussian blur	Partially (low blur is recoverable)	Aesthetic blurring where a black bar would clash
Solid color	No	Branded redactions, dark backgrounds
Sticker / emoji overlay	No	Casual social posts, fun reveals

The pixelation problem — when blurring isn’t enough

Light pixelation can be reversed. Researchers at Cornell in 2016 demonstrated that “mosaic” pixelation with a small block size can be reverse-engineered using machine learning to identify the original face — particularly if you have other photos of the same person to train on. The defence is simple: use a large enough block size that the original information is genuinely destroyed.

Block size 4–8: trivially reversible. Don’t use for privacy.
Block size 12–18: safe for casual social posts; very hard to reverse without targeted ML.
Block size 24+: unrecognisable; safe for sensitive contexts.
Black bar: impossible to reverse — the data is gone, not blurred.

For genuinely sensitive content (legal redaction, evidence handling, witness protection), use a black bar. For “I don’t want this person identified by a casual viewer”, pixelation at block 18 is enough.

How to censor a photo in your browser

Open the photo censor
Drop your image (JPG, PNG, WebP, HEIC supported)
Pick a mode: Pixelate, Blur, Black bar, Color block, or Sticker
Use the rectangle tool, brush, or “click to detect face” mode to select the region
Adjust block size or blur radius — preview updates live
Click Export. The exported image has EXIF metadata stripped (no GPS, camera serial, or timestamp)

EXIF metadata — the hidden privacy leak

Every JPG and HEIC photo from a phone or camera includes EXIF metadata: latitude/longitude (if location was on), camera model, lens, exposure settings, sometimes the camera’s serial number. A photo posted to a forum or sent in an unencrypted message can leak the exact GPS coordinates of where it was taken. Pixelating a face does nothing about EXIF.

Our exporter strips EXIF by default — the saved image has no location, no camera serial, no timestamp beyond the file’s own modified time. If you want to keep EXIF (e.g. for archival), toggle “Preserve EXIF” before export. Most platforms (Twitter, Discord, Reddit) strip EXIF on upload anyway; some (Slack file shares, email attachments, direct downloads) do not.

Common gotchas

Low-resolution selections leak through pixelation. If your photo is 4000×3000 and the face is 200×200 pixels, pixelation at block 18 turns that face into 11×11 visible blocks — recognisable to anyone who knows the person. Use block 24+ or scale up the source image first.
Reflections and shadows. Censoring a face but leaving a reflective surface (window, mirror, sunglasses) where the face is also visible defeats the purpose. Censor every visible instance.
Tattoos, scars, and unusual clothing identify people. A face-blurred photo where the subject has a distinctive tattoo or coat is still identifiable to anyone who knows them. Consider blurring or cropping those features too.
License plates have a smaller resolution than faces. A car plate at 80×30 pixels needs a smaller block size to look natural while still being unreadable — block 6–8 typically. Blurring a plate by mistake at face-block-size washes out the whole car.
Screen content reflected on a face. Photos of someone looking at a phone often reveal app content reflected on their glasses. The pixelation needs to cover both the screen and the eyes.
Don’t rely on overlay alpha. A semi-transparent blur overlay still passes through detail. Use full-opacity overlays for any actual privacy protection.

Legal context: when redaction is required

Several scenarios require censoring before publication:

EU GDPR: photos showing identifiable people require their consent for publication — censoring removes the identifiability.
HIPAA (US healthcare): patient photos must redact 18 specific identifiers including face, full-body view, distinctive marks, and any identifiers in background text.
Court-ordered redaction: evidence photos in some jurisdictions must redact identifying information of minors, witnesses, or jurors.
Press ethics: news organisations often blur the faces of bystanders, accident victims, and minors — a black bar or full pixelation, never a thin blur.

For any legal-grade redaction, use the black bar mode. Pixelation is partial protection at best; lawyers and regulators want the data gone, not just hidden.

When NOT to use this tool

For redacting text in PDFs, use a PDF-aware redaction tool — pixelating text in a PDF doesn’t remove the underlying text from the PDF stream, so the redacted text is recoverable by anyone with a PDF reader. For batch automation (censoring 100s of photos with the same regions), use a Python script with OpenCV or Pillow. For video face-blurring (e.g., bystanders in a YouTube vlog), use a video editor with face-tracking — this tool is for static images only.

Frequently asked questions

Is pixelation reversible?

Light pixelation (block 4–8) can be reverse-engineered using ML models, especially if other photos of the same subject exist. Block 18+ is safe for social use; block 24+ is unrecognisable. For genuinely sensitive content (legal redaction), use a black bar — the underlying data is gone, not just hidden.

Does censoring strip EXIF data?

Yes by default — the exported image has no GPS coordinates, camera serial, or original timestamp. Toggle “Preserve EXIF” before export if you want to keep that metadata (rare; usually a privacy mistake).

Can I use this for legal redaction?

For legal-grade redaction, use the black bar mode — the underlying pixel data is replaced, not transformed. Pixelation and blur are partial protections at best. Always check with a legal professional for high-stakes redaction (court evidence, regulated healthcare records).

What’s the difference between blur and pixelate?

Blur smooths the region using a gaussian filter; pixelate replaces it with a mosaic of solid blocks. Blur looks more natural in photos; pixelate looks more “censored” but is harder to reverse-engineer at high block sizes. For privacy, pixelate at block 18+ wins; for aesthetic blurring, gaussian blur looks better.

Is my photo uploaded?

No. The censor runs in your browser using the canvas API. The photo is loaded into a blob URL in your tab and never leaves your device. The exported image is generated locally — you can verify with DevTools’ Network tab.

Can the tool detect faces automatically?

Yes — toggle “Auto-detect faces” and the tool runs an in-browser face detection model on the image. Detected faces appear as ellipses you can accept, edit, or remove. Detection is good but not perfect; always verify each face is covered.

Related tools and guides

May 4, 2026