デザインのツール一覧
CSSジェネレータ・カラーツール・SVG作成
カラーコード変換器
HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。
カラーピッカー
カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。
画像色抽出器
画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。
画像平均色取得
画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。
CSSグラデーション生成器
CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。
CSSボックスシャドウ生成器
CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。
CSSボーダー角丸生成器
CSSのborder-radiusを4隅個別に調整して生成するツール。 楕円半径の指定やよく使う形状のプリセットも搭載。
CSSテキストシャドウ生成器
CSSのtext-shadowをプレビューしながら生成するツール。 複数シャドウの重ね合わせやネオン・エンボスのプリセット付き。
CSS三角形生成器
CSSのborderプロパティで三角形を生成するツール。 上下左右・斜め8方向に対応し、サイズと色を自由に指定できる。
CSSクリップパス生成器
CSSのclip-pathをドラッグ操作で視覚的に作成するツール。 多角形・円・楕円や、星形・ハートなどのプリセットも搭載。
CSSグラスモーフィズム生成器
すりガラス風のUI効果をプレビューしながらCSS生成するツール。 透明度・ぼかし量・ボーダー・シャドウを細かく調整できる。
CSSローダー生成器
CSSアニメーションのローダーを選んでコードを取得するツール。 スピナー・ドット・バーなど多数のデザインから色やサイズを調整。
CSSフレックスボックス生成器
Flexboxレイアウトをビジュアル操作で作成しCSSを出力。 全プロパティの調整とチートシート参照がまとめてできる。
CSS Cubic Bezier生成器
CSSアニメーションのイージング曲線を視覚的に作成するツール。 ハンドルのドラッグとアニメーションプレビューで効果を確認。
色の濃淡生成器
指定した色の明るい〜暗い濃淡バリエーションを一括生成。 段階数の調整やTailwind CSS形式でのパレット出力にも対応。
色の混合
2色以上の色を指定した比率で混合して新しい色を作成。 RGB・HSL・LABなど異なる色空間での混合結果を比較できる。
カラーパレット生成器
ベース色から色彩理論に基づいた配色パレットを自動生成。 補色・類似色・トライアドなど複数の配色ルールを搭載。
WEBフォントプレビュー
Google Fontsなどのウェブフォントをリアルタイムでプレビュー。 サイズや色を変えながら複数フォントを比較できる。
HTMLカラーネーム一覧
HTML/CSSで使える148色のカラーネームを一覧で確認できる。 色の検索・プレビュー・HEXコードのコピーにも対応。
CSS背景パターン生成器
CSSだけで背景パターンを生成できるジェネレーター。 ストライプ・ドット・チェックなどの模様をGUIで調整可能。
CSSスクロールバー生成器
CSSスクロールバーのデザインをGUIでカスタマイズできる。 色・幅・角丸などを調整してコードをそのままコピー可能。
CSSグラデーションテキスト
テキストにCSSグラデーションを適用するコードを生成。 色・方向・範囲をリアルタイムにプレビューしながら調整できる。
CSSチェックボックス生成器
オリジナルデザインのCSSチェックボックスをGUIで作成。 アニメーションや色・形状を自在にカスタマイズできる。
CSSトグルスイッチ生成器
オリジナルデザインのCSSトグルスイッチをGUIで作成。 サイズ・色・アニメーションを調整してコードを出力できる。
SVG Blob生成器
有機的な丸みを帯びたBlob形状のSVGを自動生成。 ランダム性や複雑さを調整してWebデザインの装飾に使える。
SVGパターン生成器
繰り返し可能なSVGタイルパターンを生成するジェネレーター。 模様の種類・色・サイズを調整してコードを出力できる。