CSS ジェネレーター
グラデーション・影(box/text-shadow)・角丸(border-radius)・flex/grid レイアウトを見ながら作って CSS をコピーします。入力はサーバーに送信されません。
色の停止点(2〜8 個)
影の重なり(最大 6 つ)
入力はこのブラウザ内だけで使われ、サーバーには送信されません。作られる CSS は許可された値(色・整数・決まった語)だけで組み立てるので、`;` や `}` が紛れ込めません。古いブラウザでは conic-gradient や gap の一部が使えない場合があります。
よくある質問
作った CSS はどう使いますか?
コピーした行をスタイルシートのルールの中に貼り付けます。例: .card { コピーした内容 }。グラデーションは古いブラウザ向けに代替色の行が先に出ます。
flex と grid のどちらを使いますか?
一方向(横または縦)に並べて揃えるなら flex、行と列のある格子なら grid が向いています。プレビューで値を変えて違いを確かめてください。
入力した値は保存されますか?
いいえ。すべてブラウザ内で処理され、サーバーには送信されません。
このツールの使い方
手で書くのが面倒なCSS効果を、結果を見ながら作るときに使います。グラデーション、影(box・text-shadow)、角丸、flex・gridレイアウトを調整するとCSSが作られ、コピーできます。
よくある質問
何を作れますか?
グラデーション、影(box-shadow・text-shadow)、角丸(border-radius)、flex・gridレイアウトのCSSを、見ながら作れます。
作ったCSSはどう使いますか?
コピーボタンでCSSをコピーして、スタイルシートに貼り付けてください。
入力はサーバーに送られますか?
いいえ。入力はサーバーに送られません。
関連ツール
すべてのツールを見る開発者ツール
URL・Base64・HTML・Unicodeエンコード、JSON整形・CSV変換、UNIX時間、JWTデコーダー、ハッシュ、UUID、正規表現、テキスト比較、進数変換、cron解釈、表の変換、サブネット(CIDR)・chmod計算、HTTP・MIME・ポート辞典、robots・sitemap、ダミーデータ、TOTP・semver・ビット演算・設定ファイル(.env・INI・TOML)変換・JSON スキーマ検証・docker run→compose・.gitignore・OG タグ生成・ASCII/ANSI コード表まで、40種の開発補助ツールを1か所に。
コード整形(Beautifier)
HTML・CSS・JS・JSON・PHP・Java・Kotlin・Shell・Python・SQL・XML・YAMLをタブまたはスペース(2・4・8)で整え、コピーや色付きHTMLとして書き出せます。コードはサーバーに送信されません。
コード圧縮(Minify)
HTML・CSS・JS・JSONのコメントと不要な空白を取り除いて容量を減らします。貼り付けやファイルを開く(ドラッグ&ドロップ可)ことができ、結果のコピーや.minファイルのダウンロードも可能です。コードはサーバーに送信しません。
JSON・XML・YAMLパーサー
JSON・XML・YAMLを貼り付けるかファイルで開くと、文法チェック(誤りは何行目何文字目か)、折りたたみ式のツリー表示、値・キーの検索、パスによる値の検索、整形・圧縮、相互変換ができます。処理はすべてこのブラウザ内で行われ、入力やファイルはサーバーに送信されません。
パスワード生成
長さと文字の種類を選んで、または覚えやすい単語の組み合わせ(パスフレーズ)で、推測されにくいパスワードを作ります。作った値はこの画面の外には出ません。
IPアドレス確認
現在接続しているグローバルIPアドレスとおおよその位置を確認します。