Design
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
Extract design tokens — colors, numbers, font sizes and strings — from an ECharts theme JSON and export them straight into your design system. Paste a theme object (the kind registered via echarts.init(dom, themeName)) and the tool walks every leaf, tagging each color (with optional named/rgb → hex normalization), spacing number, font size and string, then emits clean CSS variables, a Tailwind theme.extend config, Style Dictionary tokens.json, or SCSS variables. Bridges the gap between an ECharts visualization theme and Figma/CSS/Tailwind design tokens without copying each value by hand.
echarts-theme-token-extractorDesign
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
Extract a dominant color palette from an image (k-means clustering), then export it as CSS variables, SCSS variables, a Tailwind config, or JSON design tokens — with named colors and an auto-generated shade scale for each
image-to-design-tokensDesign
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-mapDesign
Generate parallax animations from images. Creates depth-based animation where different layers move at different speeds, creating a 3D effect.
image-parallaxDesign
Generate 3D stereogram (Magic Eye) images from text - creates hidden 3D text that reveals itself when viewed correctly
image-stereogramDesign
Generate wiggle stereoscopy GIFs that create 3D effect by rapidly alternating between left and right eye perspectives. No 3D glasses required!
image-wiggle-stereoscopy