デザインツール

Create CSS filter values with a live preview for icons, カード, 画像, hover states, and visual experiments.

Look up common named colors by keyword or HEX value and compare matching swatches quickly.

Blend two colors with a chosen ratio and get a copy-ready mixed result in HEX and RGB.

Build grid container CSS for cards, galleries, dashboards, feature lists, and layout experiments directly in the browser.

Generate flexbox container settings for rows, columns, wrapped item groups, ボタン, カード, and responsive sections.

Control all four corners independently to build rounded shapes for cards, badges, tiles, and component blocks.

Adjust offset, blur, spread, opacity, and inset settings to build copy-ready CSS shadows for interface elements.

ランディングセクションのクイック CSS グラデーションを生成する, コールアウト, ボタン, カード, オーバーレイ, そしてブランドビジュアル.

Check foreground and background color contrast for readable UI text, ボタン, カード, and accessible content design.

Generate matching color palettes from a base color for branding, UI states, content graphics, and design systems.