Design
Resolve any hex color to its nearest CSS named color with true CIEDE2000 ΔE distance, then browse the whole color family it belongs to.
css-color-name-resolverDesign
Layered radial-gradient "mesh" backgrounds with conic underlays, blend modes, grain and seeded layouts — live preview, CSS and Tailwind export.
css-gradient-mesh-generatorDesign
One master image in, a full multi-platform asset kit out — every crop previewed with verified safe-zone overlays and shipped as a ZIP.
social-media-template-resize-gridDesign
End-to-end frosted-glass / neumorphism CSS snippet generator: blur+saturate backdrop, tint, border, layered shadows, grain overlay, @supports fallback, -webkit- prefix, Tailwind mapping and live preview.
glassmorphism-css-snippet-builderDesign
Upload one image and preview how it appears on Instagram Feed/Story/Reels, TikTok, YouTube, X, and LinkedIn — with platform safe-zone overlays showing exactly which pixels get cropped or covered by UI before you publish.
social-media-caption-crop-previewDesign
A curated 2026 reference of image dimensions for Instagram, Facebook, X, LinkedIn, YouTube, TikTok, Pinterest and WeChat — filterable by platform.
social-media-image-size-cheatsheetDesign
Paste Tailwind classes that use arbitrary values (w-[137px], text-[#bada55], grid-cols-[1fr_2fr], [mask-type:luminance]) and inspect the generated CSS, with a live visual preview, data-type hint detection, and an explanation of each translation. Useful for debugging calc(), CSS variables, and one-off values that escape the design token scale.
tailwind-arbitrary-value-playgroundDesign
Solve a CSS filter chain that closely reproduces a target hex color from a monochrome base color
css-target-color-filter-generatorDesign
Visualize a CSS cubic-bezier easing curve, preview it live on position/opacity/scale, pick presets, and export copy-ready CSS
css-easing-visualizerDesign
Generate a clamp() expression from min and max viewport and font-size bounds, with copy-ready CSS and preview data
css-fluid-typography-clamp-calcDesign
Generate red-cyan 3D anaglyph images from regular photos. Creates stereoscopic 3D images viewable with red-cyan 3D glasses.
image-anaglyphDesign
Generate depth maps from images using brightness, saturation, and edge analysis. Creates grayscale depth maps where lighter pixels indicate closer objects and darker pixels indicate further objects.
image-depth-map