CSSスクロールバー生成
デザイン性の高いスクロールバーのCSSを作成
CSS View Transition ジェネレーター
View Transition APIの遷移アニメーションをシミュレートし、SPA・MPA用のコードを生成します。
カラーコード変換
HEX/RGB/HSL/CMYKを相互変換。配色パレットやコントラスト比チェック機能も。
画像カラーピッカー
写真や画像から色を抽出し、カラーコード（HEX/RGB等）を取得
CSS Clampジェネレーター
画面幅に合わせて滑らかに可変するclamp()関数の値を自動計算します。
CSS clip-path ジェネレーター
ドラッグ操作で簡単にCSS clip-pathの切り抜き図形を作成し、コードを生成します。
CSS Container Query ジェネレーター
コンテナクエリを視覚的に生成。メディアクエリ変換・プレビュー対応。
CSS Filter & Blend ジェネレーター
フィルターやブレンドを視覚的に組み合わせ、コード生成と画像保存が可能です。
CSSグラデーションジェネレーター
線形・放射・円錐グラデーションやパターンを直感的に生成。
Flexbox/Grid レイアウト
視覚的なGUIでレイアウトコードを生成
box-shadow ジェネレーター
複数レイヤーの美しい影を直感的に作成
モダンUI ジェネレーター
グラスモーフィズム対応の美しいUIコード出力
CSSアニメーション生成
@keyframes のコードをGUI出力
SVG背景パターン生成
Data URI変換＆軽量化の背景作成
CSS三角形ジェネレーター
borderだけでCSS三角形・矢印を生成、コード即コピー
スプライトアニメーション生成
複数画像からCSSスプライトアニメーションとコードを生成
CSS border-radius ジェネレーター
8つの値をGUIで操作してblob形状も作成、CSSコード即コピー
文字サイズ・行間プレビュー
font-size/line-height/letter-spacingをリアルタイムプレビュー
Webフォントプレビュー
Webフォントをリアルタイム比較・CSS生成
SVGアイコン検索
Lucide・Heroiconsを横断検索してSVGコードをコピー
フィードバックを送信
ツールをより良くするためのご意見をお聞かせください。
現在、フィードバックの受付を一時停止しています
サーバーが混み合っているか、スパム防止のための安全装置が作動しています。しばらく経ってから再度アクセスしてください。