148 live tools
Image & Design
Canvas, color, ratio, and compression tools.
Browser-side image and design helpers: SVG to PNG, crop math, compression, contrast, palettes, favicon tags, and font stacks. Files stay on this device. Download a result only after you preview it.
Design expansion 15 Jan 2027
-
Image Grayscale Converter
Image Grayscale. Browser-side only.
Open tool -
Image Sepia Filter Tool
Image Sepia Filter. Browser-side only.
Open tool -
Image Rotate & Flip Tool
Image Rotate & Flip. Browser-side only.
Open tool -
Image Border/Frame Adder
Image Border/Frame Adder. Browser-side only.
Open tool -
Image Collage Grid Maker
Image Collage Grid Maker. Browser-side only.
Open tool -
Image Watermark Compositing Tool (Actual Overlay)
Image Watermark Compositing Tool (Actual Overlay). Browser-side only.
Open tool -
Image-to-Base64 Data URI Converter
Image-to-Base64 Data URI. Browser-side only.
Open tool -
Base64-to-Image Preview & Download Tool
Base64-to-Image Preview & Download. Browser-side only.
Open tool
Design expansion 22 Jan 2027
-
Image Megapixel Calculator
Image Megapixel. Browser-side only.
Open tool -
Camera Sensor Crop Factor Calculator
Camera Sensor Crop Factor. Browser-side only.
Open tool -
Print Resolution Recommendation Calculator
Print Resolution Recommendation. Browser-side only.
Open tool -
CSS Gradient Text Generator
CSS Gradient Text. Browser-side only.
Open tool -
CSS 3D Transform Generator (Rotate X/Y/Z)
CSS 3D Transform Generator (Rotate X/Y/Z). Browser-side only.
Open tool -
CSS Perspective Tilt Card Generator
CSS Perspective Tilt Card. Browser-side only.
Open tool -
CSS Parallax Scroll Snippet Generator
CSS Parallax Scroll Snippet. Browser-side only.
Open tool -
CSS Sticky Header Snippet Generator
CSS Sticky Header Snippet. Browser-side only.
Open tool -
CSS Masonry Grid Generator
CSS Masonry Grid. Browser-side only.
Open tool -
CSS Object-Fit Preview Tool
CSS Object-Fit Preview. Browser-side only.
Open tool -
CSS Noise/Grain Texture Generator
CSS Noise/Grain Texture. Browser-side only.
Open tool -
CSS Pattern Background Generator (Stripes/Dots)
CSS Pattern Background Generator (Stripes/Dots). Browser-side only.
Open tool -
CSS 3D Button Press Effect Generator
CSS 3D Button Press Effect. Browser-side only.
Open tool -
CSS Badge/Ribbon Generator
CSS Badge/Ribbon. Browser-side only.
Open tool -
CSS Tooltip Generator
CSS Tooltip. Browser-side only.
Open tool -
CSS Toggle Switch Generator
CSS Toggle Switch. Browser-side only.
Open tool -
CSS Progress Bar Generator
CSS Progress Bar. Browser-side only.
Open tool -
CSS Card Hover Effect Generator
CSS Card Hover Effect. Browser-side only.
Open tool -
CSS Animated Gradient Background Generator
CSS Animated Gradient Background. Browser-side only.
Open tool -
SVG Wave Divider Generator
SVG Wave Divider. Browser-side only.
Open tool
Design expansion 29 Jan 2027
-
SVG Pattern Background Generator
SVG Pattern Background. Browser-side only.
Open tool -
SVG Icon Recolor Tool
SVG Icon Recolor. Browser-side only.
Open tool -
SVG-to-JSX Component Converter
SVG-to-JSX Component. Browser-side only.
Open tool -
SVG viewBox Calculator
SVG viewBox. Browser-side only.
Open tool -
SVG Stroke-Dasharray Line-Draw Animation Generator
SVG Stroke-Dasharray Line-Draw Animation. Browser-side only.
Open tool -
Logo Color Palette Extractor
Logo Color Palette Extractor. Browser-side only.
Open tool -
Pantone-to-HEX Approximate Converter
Pantone-to-HEX Approximate. Browser-side only.
Open tool -
RAL Color Code to HEX Converter
RAL Color Code to HEX. Browser-side only.
Open tool -
Web-Safe Color Name Lookup
Web-Safe Color Name. Browser-side only.
Open tool -
Random Palette Generator
Random Palette. Browser-side only.
Open tool -
Mesh Gradient CSS Generator
Mesh Gradient CSS. Browser-side only.
Open tool -
Canvas Duotone Image Effect Tool
Canvas Duotone Image Effect. Browser-side only.
Open tool -
Image Pixelation Effect Tool
Image Pixelation Effect. Browser-side only.
Open tool -
Photo-to-ASCII Art Converter
Photo-to-ASCII Art. Browser-side only.
Open tool -
Halftone Dot Effect Generator
Halftone Dot Effect. Browser-side only.
Open tool -
Unique Color Count Analyzer
Unique Color Count Analyzer. Browser-side only.
Open tool -
Dominant Color Extractor (K-Means)
Dominant Color Extractor (K-Means). Browser-side only.
Open tool -
Thumbnail Sprite Sheet Generator
Thumbnail Sprite Sheet. Browser-side only.
Open tool -
CSS Sprite Position Calculator
CSS Sprite Position. Browser-side only.
Open tool -
Icon Grid Spacing Calculator
Icon Grid Spacing. Browser-side only.
Open tool
Design expansion 5 Feb 2027
-
App Icon Safe-Zone Calculator (iOS/Android)
App Icon Safe-Zone Calculator (iOS/Android). Browser-side only.
Open tool -
Screenshot Device Frame Mockup Generator
Screenshot Device Frame Mockup. Browser-side only.
Open tool -
Social Post Mockup Preview Tool
Social Post Mockup Preview. Browser-side only.
Open tool -
Business Card Size & Bleed Calculator
Business Card Size & Bleed. Browser-side only.
Open tool -
General Print Bleed & Margin Calculator
General Print Bleed & Margin. Browser-side only.
Open tool -
Poster Size Calculator
Poster Size. Browser-side only.
Open tool -
Golden Ratio Grid Overlay Generator
Golden Ratio Grid Overlay. Browser-side only.
Open tool -
Rule of Thirds Grid Overlay Generator
Rule of Thirds Grid Overlay. Browser-side only.
Open tool -
Color Temperature (Kelvin) to RGB Converter
Color Temperature (Kelvin) to RGB. Browser-side only.
Open tool -
Monitor PPI Calculator
Monitor PPI. Browser-side only.
Open tool -
Signage Legibility Distance Calculator
Signage Legibility Distance. Browser-side only.
Open tool -
Kerning/Letter-Spacing Calculator
Kerning/Letter-Spacing. Browser-side only.
Open tool -
CSS @font-face Snippet Generator
CSS @font-face Snippet. Browser-side only.
Open tool -
Font Pairing Suggester
Font Pairing Suggester. Browser-side only.
Open tool -
Colorblind-Safe Palette Suggester
Colorblind-Safe Palette Suggester. Browser-side only.
Open tool -
Video Thumbnail Safe-Zone Previewer (Twitch)
Video Thumbnail Safe-Zone Previewer (Twitch). Browser-side only.
Open tool -
Discord Banner/Icon Size Checker
Discord Banner/Icon Size. Browser-side only.
Open tool -
Print CMYK vs RGB Warning Checker
Print CMYK vs RGB Warning. Browser-side only.
Open tool -
Image Rounded Corner Preview Tool
Image Rounded Corner Preview. Browser-side only.
Open tool -
Image Vignette Effect Generator
Image Vignette Effect. Browser-side only.
Open tool
Design expansion 12 Feb 2027
-
Image Brightness/Contrast Adjuster
Image Brightness/Contrast Adjuster. Browser-side only.
Open tool -
Image Saturation/Hue Adjuster
Image Saturation/Hue Adjuster. Browser-side only.
Open tool -
Image Threshold (Black & White) Converter
Image Threshold (Black & White). Browser-side only.
Open tool -
Image Sharpen/Blur Filter Tool
Image Sharpen/Blur Filter. Browser-side only.
Open tool -
CSS Isometric Shape Generator
CSS Isometric Shape. Browser-side only.
Open tool -
CSS Origami/Paper-Fold Effect Generator
CSS Origami/Paper-Fold Effect. Browser-side only.
Open tool -
CSS Ripple Click Effect Generator
CSS Ripple Click Effect. Browser-side only.
Open tool -
CSS Skeleton Loading Screen Generator
CSS Skeleton Loading Screen. Browser-side only.
Open tool -
CSS Confetti Animation Generator
CSS Confetti Animation. Browser-side only.
Open tool -
CSS Cursor Trail Effect Generator
CSS Cursor Trail Effect. Browser-side only.
Open tool -
Icon Set Consistency Checker (Stroke Width)
Icon Set Consistency Checker (Stroke Width). Browser-side only.
Open tool -
Design Token Naming Convention Generator
Design Token Naming Convention. Browser-side only.
Open tool -
Spacing Scale Generator (4px/8px Grid)
Spacing Scale Generator (4px/8px Grid). Browser-side only.
Open tool -
Color Ramp Generator (50-900 Shades)
Color Ramp Generator (50-900 Shades). Browser-side only.
Open tool -
Dark Mode Color Inverter
Dark Mode Color Inverter. Browser-side only.
Open tool -
Accessible Focus Ring CSS Generator
Accessible Focus Ring CSS. Browser-side only.
Open tool -
CSS Print Stylesheet Generator
CSS Print Stylesheet. Browser-side only.
Open tool -
Favicon Dark/Light Mode Variant Generator
Favicon Dark/Light Mode Variant. Browser-side only.
Open tool -
Image Comparison Slider Snippet Generator
Image Comparison Slider Snippet. Browser-side only.
Open tool -
Before/After Image Overlay Generator
Before/After Image Overlay. Browser-side only.
Open tool
Design expansion 19 Feb 2027
-
Responsive Image srcset Generator
Responsive Image srcset. Browser-side only.
Open tool -
Picture Element Fallback Generator
Picture Element Fallback. Browser-side only.
Open tool -
Lorem Picsum Placeholder URL Builder
Lorem Picsum Placeholder URL Builder. Browser-side only.
Open tool -
Placeholder Image Text/Size Generator
Placeholder Image Text/Size. Browser-side only.
Open tool -
Color Palette Accessibility Score Checker
Color Palette Accessibility Score. Browser-side only.
Open tool -
Icon-to-SVG-Symbol Sprite Converter
Icon-to-SVG-Symbol Sprite. Browser-side only.
Open tool -
Image Metadata Stripper (Privacy Tool)
Image Metadata Stripper (Privacy Tool). Browser-side only.
Open tool -
SVG Optimizer & Minifier Tool
SVG Optimizer & Minifier. Browser-side only.
Open tool -
Meta Robots Tag Generator
Meta Robots Tag. Browser-side only.
Open tool -
Slack Custom Emoji Size Checker
Slack Custom Emoji Size. Browser-side only.
Open tool
Breakpoints, fonts, and contrast batches
-
CSS Unit Converter (px/pt/vh/vw/rem)
Convert among px, pt, rem, vw, and vh using a root font size and viewport. Not the px-to-rem-only page.
Open tool -
Media Query Breakpoint Generator
Emit min-width @media snippets for chosen Tailwind-style breakpoints. Not clamp() and not container queries.
Open tool -
Container Query Snippet Generator
Emit container-type and @container min-width snippets for a named container. Not viewport @media.
Open tool -
Alt-Text Length Checker
Count image alt characters against a 125 (social) and 150 (verbose) band. Not a general word counter.
Open tool -
Batch Color Contrast Checker
Score many fg|bg hex pairs for WCAG 2.1 AA/AAA. The single-pair contrast page is a different tool.
Open tool -
Google Fonts Link/Import Generator
Build css2 <link> and @import URLs from a family name and weights. Not a web-safe stack preview.
Open tool -
Variable Font Axis Tester
Emit font-variation-settings for wght, wdth, and slnt. Does not load a.woff2 and is
Open tool -
Icon Font Unicode Lookup
Look up a small Font Awesome and Material icon name table to code points. Not a.ttf parser.
Open tool
Favicon packs and ICO inspect
-
Multi-Size Favicon ICO Packer
Emit PNG filenames, HTML link tags, and an ImageMagick ICO command for 16, 32, 48, 180, 192, and 512. Does not build a binary ICO.
Open tool -
ICO File Inspector
Read file name, size, and MIME from a chosen.ico, plus optional header hex for ICONDIR magic 00 00 01 00.
Open tool
Image processing & files
-
SVG to PNG Converter
Convert SVG to PNG in the browser.
Open tool -
Image Dimension Resizer
Resize width and height, then download.
Open tool -
Color Picker from Image
Sample colors from a canvas image.
Open tool -
Image Crop Ratio Calculator
Target crop-box dimensions.
Open tool -
PNG Size Reducer (Canvas Downscale)
Redraw a PNG at a smaller pixel scale and re-encode.
Open tool -
Image Aspect Ratio Crop Calculator (16:9, 4:3, 1:1, 9:16)
Largest centered crop box of a chosen ratio that still fits inside a source width and height.
Open tool -
Image DPI / PPI Calculator for Printing
Print size in inches and centimeters from pixel width, height, and DPI.
Open tool -
Image File Size Estimator (JPEG vs PNG vs WebP)
Rough byte estimates for raw, JPEG, WebP, and PNG from dimensions, bit depth, and JPEG quality.
Open tool -
WebP / AVIF Compatibility Cheatsheet & Preview
Short Chrome, Firefox, and Safari support notes for WebP or AVIF so you can plan a picture fallback.
Open tool -
Text Banner ASCII Art Generator
Map A-Z, 0-9, and spaces into a three-row block banner. Does not convert a photo to ASCII.
Open tool -
GIF Speed & Frame Interval Calculator
Duration and a hundredths-friendly delay from frame count plus either FPS or delay milliseconds.
Open tool
Aspect ratio & layout
Typography
-
PX to REM / EM Converter
Convert pixels using a base font size.
Open tool -
Web Safe Fonts Preview Tool
Preview stacks on sample text.
Open tool -
Typography Scale Calculator (Golden Ratio, Major Third)
Six modular type sizes from a base pixel size and a ratio such as 1.25 or 1.618.
Open tool -
Responsive Font Size rem/px Interconvertible Calculator
Convert a pixel size through a root px into rem, em, and a clamp() suggestion for fluid type.
Open tool -
Line Height / Leading Calculator for Typography
Unitless line-height plus the matching px and percent values from font size and a 1.2-1.8 ratio.
Open tool
Design utilities
Color & accessibility
-
Color Contrast Ratio Checker (WCAG 2.1 AA / AAA Compliance)
Relative luminance contrast between two colors with WCAG 2.1 AA and AAA pass or fail for normal and large text.
Open tool -
Color Palette Generator (Monochromatic, Analogous, Triadic)
Build a five-swatch hex palette from a base color by rotating HSL hue or stepping lightness.
Open tool -
Color Shade & Tint Generator
Mix a base hex toward black for five shades and toward white for five tints.
Open tool -
HEX to RGB / RGBA Code Converter
Turn a hex color plus alpha into rgb() and rgba() CSS, focused on copy-ready declarations.
Open tool -
HSL / HSLA to HEX / RGB Converter
Convert HSL channels and alpha into hex and rgb/rgba CSS.
Open tool -
CMYK to RGB / HEX Print-to-Web Color Converter
Convert CMYK percents used in print into sRGB and hex for the web.
Open tool -
Color Blindness Visual Simulator (Protanopia, Deuteranopia)
Apply a simple linear RGB matrix for protanopia or deuteranopia and show the simulated hex.
Open tool
CSS visual effects
-
CSS Glassmorphism Code Generator
Build backdrop-filter frost glass from blur, fill opacity, and a background color.
Open tool -
CSS Neumorphism Code Generator
Soft UI from two opposing box-shadows, radius, distance, blur, and a surface color.
Open tool -
CSS Border Radius / Blob Shape Builder
Eight percentages (horizontal and vertical per corner) compiled into one border-radius blob.
Open tool -
CSS Text Shadow Code Generator
One text-shadow layer from X, Y, blur, and color.
Open tool -
CSS Backdrop Filter Builder
Combine blur, saturate, and brightness into one backdrop-filter declaration.
Open tool -
CSS Custom Scrollbar Styling Generator
WebKit scrollbar width, thumb, and track colors, with an optional Firefox scrollbar-color pair.
Open tool -
CSS Loader / Spinner Code Builder
A rotating border spinner from size, accent color, and animation seconds.
Open tool -
CSS Polygon Clip-Path Generator
clip-path: polygon() for triangle, diamond, hexagon, or a custom list of points.
Open tool
SVG & favicon
More in Image & Design
-
Favicon HTML Tag Builder from Upload
Preview a 32x32 canvas draw and copy HTML link tags for common favicon sizes. Does not emit ICO files.
Open tool -
Hex Sample Mixer (Not Pixel Clustering)
Deduplicate pasted hex samples and average them into a mix hex. Does not cluster image pixels.
Open tool -
CSS Blur Overlay Generator
Emit a CSS filter blur for an overlay box. Optional file is not decoded into a blurred image.
Open tool -
CSS Watermark Overlay Snippet
A CSS overlay snippet for watermark text with opacity and size. Not a logo file compositor.
Open tool -
Photo File Metadata Inspector
Show name, byte size, MIME type, and last-modified from a chosen file. Full EXIF tags are not parsed.
Open tool
Explore other categories: Finance & Money , Social & Creators , Developer & Webmaster and Daily Utilities