Design Tools — Free Online Utilities

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.

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

Selecione qualquer cor da sua tela e veja instantaneamente nos formatos HEX, RGB, HSL e CMYK.

Converta marcação SVG em uma URI de dados CSS background-image — codificada por URL ou base64.

Converta temperatura de cor em Kelvin para valores de cor RGB e hexadecimais.

Converta um valor CSS entre px, rem, em, %, vw, vh, pt, cm, mm e in de uma só vez.

Faça upload de uma imagem e extraia suas cores dominantes como uma bela paleta.

Explore combinações de fontes do Google Fonts, visualize texto de título e corpo ao vivo e copie snippets de CSS prontos para usar.

Generate CSS clamp() fluid typography values for responsive font sizes.

Crie visualmente bordas, contornos e box-shadows CSS com prévia ao vivo e saída de código instantânea.

Crie visualmente gradientes CSS lineares e radiais e copie a propriedade CSS pronta para uso.

Crie valores de box-shadow CSS visualmente com prévia ao vivo — suporta múltiplas camadas.

Configure visualmente as propriedades do Flexbox e obtenha o CSS gerado instantaneamente.

Gere paletas de cores harmoniosas a partir de uma cor base usando regras de complementaridade, analogia, tríade e outras harmonias.

Crie animações CSS @keyframes visualmente com prévia ao vivo, controles de tempo e editor de easing cubic-bezier.

Crie visualmente layouts CSS Grid arrastando itens pelas células e exporte o CSS.

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

Transform typed text into a realistic handwriting-style image and download as PNG.

Misture duas cores usando os modos de mesclagem RGB, RYB subtrativo, HSL ou Lab perceptual com uma prévia de gradiente ao vivo.

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.

Navegue e pesquise todas as 140 cores HTML/CSS nomeadas com valores HEX e RGB.

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.

Pick any color from your screen and get harmonies, accessibility, and conversions.

Crie belos gradientes CSS de múltiplas paradas visualmente com paradas de arrastar e soltar.

Visualize como suas imagens aparecem para pessoas com diferentes tipos de daltonismo.

Live font preview with Google Fonts and side-by-side comparison

Verifique as taxas de contraste WCAG 2.1 para pares de cores de primeiro plano/fundo e obtenha resultados de aprovação/reprovação instantaneamente.

Cole um atributo `d` de caminho SVG, renderize-o ao vivo com uma grade e explore cada comando de caminho analisado.