CodeKitHubCSSツール
ビジュアルCSSジェネレーター——スライダーを動かしてコードをコピーするだけ、構文を覚える必要なし。
このカテゴリのツール
Border Radius ジェネレーター
スライダーをドラッグして各角を丸め、border-radiusのCSSをコピーします。
Box Shadow ジェネレーター
オフセット、ぼかし、広がり、色のスライダーを調整し、box-shadowのCSSをコピーします。
React Native シャドウジェネレーター
シャドウを視覚的にデザインして、iOS と Android 両対応の正確な React Native style オブジェクトを取得します。
CSS キュービックベジェ ジェネレーター
スライダーでイージング曲線をデザインし、アニメーションをプレビューして、cubic-bezier() のCSSをコピー。
CSS テキストグリッチジェネレーター
テキストを入力し、2色のグリッチカラーを選んで、アニメーションするカラーずれエフェクトのCSS + HTMLをコピー。
CSSローダージェネレーター
回転・バウンド・パルスするCSSローディングアニメーションを作成し、CSSとHTMLをコピーします。
CSSチェックボックスジェネレーター
丸型チェック・トグルスイッチ・塗りつぶし円のチェックボックスをデザインし、CSSをコピーします。
CSS スイッチ ジェネレーター
サイズ、色、角丸を調整し、アクセシブルなcheckboxベースのトグルスイッチをHTMLとCSSとしてコピーします。
CSS 三角形ジェネレーター
方向、サイズ、色を選び、ボーダーテクニックで作った純粋なCSS三角形をコピーします。
グラスモーフィズム ジェネレーター
背景の不透明度、ぼかし、ボーダー、角丸を調整してすりガラスカードを作り、CSSをコピーします。
CSS背景パターン ジェネレーター
パターン（ドット、ストライプ、市松模様、グリッド）を選び、色とサイズを調整して、CSSをコピーします。
CSS グラデーションジェネレーター
カラーストップと角度スライダーで線形・放射状グラデーションを作成し、CSSをコピーします。
CSS クリップパスジェネレーター
形状プリセットを選び、切り抜きをライブプレビューして、生成されたclip-path CSSをコピーします。
Tailwindカラーリファレンス
Tailwindのデフォルトカラーを両方向で検索：HEXからクラス名、またはクラス名からHEX/RGB——さらに完全に閲覧可能なパレット付き。
Pantone CMYK RGB コンバーター
Pantone（PMS）、CMYK、RGB、Hexのカラーコードを双方向に変換。1341色のPantoneリファレンスを検索できます。
CSS Emboss Text Generator
CSSのエンボスやエングレーブテキスト効果を瞬時に生成 — テキストを入力し、スタイルと強度を調整して、CSSコードをコピーできます。
Neon Text Generator
光るネオン風CSSテキスト効果を瞬時に生成 — テキストを入力し、光の色と強度を選んで、CSSコードをコピーできます。
CSS Gold Button Generator
メタリックなゴールド、シルバー、ブロンズ、ローズゴールドのCSSボタンを瞬時に生成 — テキストを入力し、メタルスタイルを選んで、CSSコードをコピーできます。
カラーピッカー
任意の色を視覚的に選択するか、アップロードした画像から色を抽出できます。HEX、RGB、HSL形式での出力やコピーボタンも利用可能です。