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
HEX値とRGB値を含む140種類のすべての名前付きHTML/CSSカラーを検索・閲覧できます。
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.
CSSのリニアグラデーションとラジアルグラデーションを視覚的に作成し、すぐに使用できるCSSプロパティをコピーします。
CSSのbox-shadow値をライブプレビューで視覚的に作成します。複数のレイヤーに対応しています。
Flexboxのプロパティを視覚的に設定し、生成されたCSSを即座に取得します。
補色、類似色、三色配色などのハーモニールールを使用してベースカラーから調和のとれたカラーパレットを生成します。
ライブプレビュー、タイミングコントロール、cubic-bezierイージングエディターでCSS @keyframesアニメーションをビジュアルで作成します。
セルをまたいでアイテムをドラッグしてCSSグリッドレイアウトをビジュアル的に構築し、CSSをエクスポートできます。
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マークアップをCSSのbackground-imageデータURI（URLエンコードまたはbase64）に変換できます。
SVGパスの`d`属性を貼り付け、グリッド付きでライブレンダリングし、解析された各パスコマンドを探索します。
Pick any color from your screen and get harmonies, accessibility, and conversions.
Live font preview with Google Fonts and side-by-side comparison
画面から任意の色を選択して、HEX、RGB、HSL、CMYK形式で即座に確認できます。
前景色と背景色のペアのWCAG 2.1コントラスト比を確認し、合否結果を即座に取得します。
ライブグラデーションプレビューで、RGB、RYB減法、HSL、または知覚的Lab混合モードを使用して2色を混合します。
色温度をケルビンからRGBおよびHEXカラー値に変換できます。
厳選されたGoogle Fontsのペアリングを閲覧し、見出しと本文テキストをライブでプレビューし、すぐに使えるCSSスニペットをコピーできます。
ドラッグ＆ドロップストップで美しいマルチストップCSSグラデーションをビジュアル的に作成できます。
CSSの値をpx、rem、em、%、vw、vh、pt、cm、mm、inの間で一度にすべて変換します。
画像をアップロードして主要な色を美しいパレットとして抽出します。
さまざまな種類の色覚異常を持つ人々に画像がどのように見えるかをプレビューします。