Design
把任意十六进制颜色解析成最接近的 CSS 命名色,给出真实 CIEDE2000 ΔE 距离,并浏览它所属的整个色族。
css-color-name-resolverDesign
生成 2024 年以来 Dribbble/Behance 流行的“渐变网格”:多个径向渐变(色斑 → 同色透明衰减)叠加在底色(可选角向渐变底层)上,支持混合模式、SVG 胶片颗粒、种子化布局(四角 / 环形 / 散点 / 网格),实时预览 + 可复制 CSS + Tailwind 任意值类名导出。色斑用 #RRGGBB00 八位十六进制同色衰减,避免 transparent 关键字的灰圈问题。
css-gradient-mesh-generatorDesign
上传一张主图,一次生成全套平台装配图:Instagram(1:1 / 4:5 / 3:4 网格 / Story / Reel)、X(头图 1500×500 / 信息流)、LinkedIn(个人横幅 / 公司封面 / 帖子图)、YouTube(缩略图 / 频道横幅)、Facebook 链接分享。每个裁剪预览叠加 2025-2026 已验证的安全区蒙版(Story 顶/底/侧边距、X 头像圆、LinkedIn 头像区、YouTube 时长角标),一键导出 ZIP。
social-media-template-resize-gridDesign
端到端生成磨砂玻璃(glassmorphism)或新拟态(neumorphism)的完整 CSS 片段:调节模糊、饱和度、色调不透明度、圆角、边框、外阴影与顶部高光;可选 SVG feTurbulence 颗粒噪点叠加与 @supports 不支持降级;自动附带 -webkit-backdrop-filter 前缀(Safari 18 以下必需)与 Tailwind 类映射(含 v3/v4 差异提示),并在渐变背景上实时预览成品卡片。
glassmorphism-css-snippet-builderDesign
上传一张图,预览它在 Instagram 动态/故事/Reels、TikTok、YouTube、X、LinkedIn 上的呈现——叠加平台安全区遮罩,发布前明确显示哪些像素会被裁切或被 UI 遮挡。
social-media-caption-crop-previewDesign
2026 年 Instagram、Facebook、X、LinkedIn、YouTube、TikTok、Pinterest、微信图片尺寸参考,可按平台筛选。
social-media-image-size-cheatsheetDesign
粘贴使用任意值的 Tailwind 类(w-[137px]、text-[#bada55]、grid-cols-[1fr_2fr]、[mask-type:luminance]),查看生成的 CSS、实时可视化预览、数据类型提示识别,以及每条转换的解释。适合调试 calc()、CSS 变量与超出设计令牌刻度的一次性取值。
tailwind-arbitrary-value-playgroundDesign
从单色底色求解接近目标十六进制颜色的 CSS filter 组合
css-target-color-filter-generatorDesign
可视化 CSS cubic-bezier 缓动曲线,在位置/透明度/缩放上实时预览,选择预设并导出可复制的 CSS
css-easing-visualizerDesign
输入最小/最大视口与字号边界,输出 clamp() 表达式、可复制 CSS 与实时预览数据
css-fluid-typography-clamp-calcDesign
从普通照片生成红青3D立体图。创建可使用红青3D眼镜观看的立体3D图像。
image-anaglyphDesign
从图像生成深度图,使用亮度、饱和度和边缘分析。生成灰度深度图,较亮像素表示较近物体,较暗像素表示较远物体。
image-depth-map