Design Tools — Free Online Utilities
Design and CSS tools to build gradients, shadows, and layouts, pick and convert colors between formats, and check contrast for accessibility. Copy production-ready CSS in one click.
图片调色板提取器
Feature-rich browser whiteboard with layers, undo/redo, and PNG export.
Calculate, simplify, and scale aspect ratios
Preview and customise CSS keyframe animations live, then copy the ready-to-use CSS code.
Visually generate CSS clip-path shapes — polygon, circle, ellipse, inset — with draggable handles, preset shapes, and live preview.
Build a complete CSS design token system with colors, typography, spacing, shadows, and export to CSS, SCSS, JS, or Tailwind.
Build CSS filter effects visually with live preview — blur, brightness, contrast, sepia, hue-rotate, and more.
Generate CSS glassmorphism effects with live preview and code export
Visually design CSS borders, shadows, and frames for images and copy the code.
Generate pure CSS loading spinners and animations with live preview.
Browse all 140 CSS named colors as swatches, filter by hue, sort by name or lightness
Generate animated CSS neon glow text effects with live preview
Generate CSS neumorphism / soft UI box-shadow styles with live preview.
Generate pure CSS triangles and arrows with live preview using the border trick or clip-path.
可视化构建CSS边框、轮廓和盒子阴影，带实时预览和即时代码输出。
Check WCAG contrast ratio for foreground and background colors.
Generate complementary, triadic, and other color palettes from any base color.
Find the closest CSS named color for any hex or RGB value.
Extract dominant colors from any image using k-means clustering with CSS, Tailwind, Figma, and ASE export.
Extract a dominant color palette from any image using k-means clustering.
Advanced color picker with eyedropper, history, and 6 format outputs
Interactive HSL color wheel with harmony suggestions and palette export.
Find the nearest Tailwind CSS color class for any color
Generate CSS clamp() fluid typography values for responsive font sizes.
Create stunning CSS mesh gradients with draggable control points.
Create stunning CSS gradient text effects with live preview
Interactive color picker with HSL, RGB, HEX, and HSV support
浏览和搜索全部140个命名HTML/CSS颜色，包含HEX和RGB值。
Transform typed text into a realistic handwriting-style image and download as PNG.
Calculate PPI, total megapixels, and pixel dimensions for any screen or print.
Render text in retro pixel/bitmap fonts and export as PNG or text art.
Generate random single colors or harmony-aware palettes with HSL constraints, locked colors, export to CSS/HEX/RGB/HSL, and palette history.
Generate CSS or SMIL animations for SVG elements
Browse 200+ categorised SVG icons, customise colour and size, and copy or download.
Generate tileable SVG patterns for backgrounds with live preview
Create decorative SVG wave dividers for websites with live preview and one-click download.
粘贴SVG路径`d`属性，在带网格的画布上实时渲染，并探索每个解析的路径命令。
将SVG标记转换为CSS background-image数据URI——URL编码或Base64格式。
Pick any color from your screen and get harmonies, accessibility, and conversions.
Live font preview with Google Fonts and side-by-side comparison
可视化构建CSS线性和径向渐变，并复制可直接使用的CSS属性。
可视化构建CSS box-shadow值，支持实时预览和多层叠加。
没有硬性限制，但非常长的字符串可能产生宽输出。使用宽度滑块来换行或限制输出。
会话期间添加的自定义时区将保留，直到您删除它们或关闭标签页。目前未启用通过localStorage持久化。
可视化构建CSS @keyframes动画，带实时预览、时间控件和cubic-bezier缓动编辑器。
通过在格子上拖动项目可视化构建CSS Grid布局，并导出CSS。
设计
从屏幕上拾取任意颜色，立即以HEX、RGB、HSL和CMYK格式显示。
可视化地以拖放停靠点创建美丽的多停靠点CSS渐变。
浏览精选的Google Fonts搭配方案，实时预览标题和正文文本，并复制即用的CSS代码片段。
将开尔文色温转换为RGB和十六进制颜色值。
预览您的图片在不同类型色盲人群眼中的外观。
检查前景色/背景色对的WCAG 2.1对比度，即时获取通过/失败结果。
使用RGB、RYB减色、HSL或感知Lab混合模式混合两种颜色，并实时预览渐变效果。