CSS ローダージェネレーター
CSS Loader Generator
軌道リングまたは 3 ドットのローディングスピナーをサイズ・線・速度・色でデザインし、reduced motion 対応の CSS をコピー。
デザイン / ビジュアルシステムラボ
デザイン
ライブプレビューで CSS と配色を組み立て、使えるコードを取得します。
デザイン
主要ツール 17 件。ライブプレビューで CSS と配色を組み立て、そのまま使える結果をコピーします。
17 件中 17 件を表示
CSS チェックボックスジェネレーター
CSS Checkbox Generator
カスタムチェックボックスのサイズ・枠線・状態色を整え、キーボード操作できる本物の input を残す CSS をコピー。
CSS スイッチジェネレーター
CSS Switch Generator
トラック・つまみ・2 状態の色を持つピュア CSS トグルスイッチをデザイン。フォーカスと reduced motion 処理済みのコードをコピー。
CSS clip-path ジェネレーター
CSS Clip Path Generator
ドラッグ、キーボード、座標入力で多角形を編集。4 種類のプリセットから始め、clip-path 宣言や CSS をローカルでコピーできます。
CSS 背景パターンジェネレーター
CSS Background Pattern Generator
ドット・グリッド・斜線の背景パターンを純 CSS のグラデーションだけで構成。画像ファイル不要でタイル・線・色を調整できる。
CSS cubic-bezier ジェネレーター
CSS Cubic Bezier Generator
ドラッグできる制御点でイージングカーブを形づくり、指定 duration のライブモーションを確認して cubic-bezier() 値をコピー。
CSS グラスモーフィズムジェネレーター
CSS Glassmorphism Generator
すりガラスパネルを色味・不透明度・背景ぼかし・彩度・枠線で構築。賑やかな背景上のプレビューで調整し、CSS をコピーできる。
CSS グリッチテキストジェネレーター
CSS Text Glitch Effect Generator
短いテキストに 3 層の色収差グリッチをオフセットと速度の調整付きで施し、reduced motion フォールバック付き CSS をコピー。
CSS グラデーションジェネレーター
CSS Gradient Generator
線形・放射グラデーションを角度・焦点・色ストップ位置で明示的に組み立て、単一の background 宣言としてコピーできる。
CSS ボックスシャドウジェネレーター
CSS Box Shadow Generator
オフセット・ぼかし・広がり・色・不透明度・inset をライブカードで調整し、スタイルシートに使う box-shadow 宣言をコピー。
CSS 角丸ジェネレーター
CSS Border Radius Generator
4 つのコーナーをピクセルかパーセントで連動または個別に成形し、4 値を明示した border-radius 宣言をコピーする。
HEX → RGBA 変換
HEX to RGBA Converter
#RGB・#RGBA・#RRGGBB・#RRGGBBAA を alpha まで正確にデコードして rgba() へ変換。ライブスウォッチとコピー可能な結果。
RGBA → HEX 変換
RGBA to HEX Converter
rgb()・rgba() を #RRGGBB または #RRGGBBAA に変換。チャネルごとの確認と alpha の正確な丸めをローカルで行う。
集中できる作業環境 / 設定なしで使える結果へ。
ブラウザ優先を、設計から。
ブラウザ優先
パッケージの導入やアカウント登録なしで、すぐに作業できます。
処理を見える状態に
入力、結果、状態、実行方式を各段階で確認できます。
そのまま書き出せる
整理し直さず、必要な結果をコピーまたは保存できます。
関連カテゴリー
別の目的別コレクションから作業を続けられます。
システム設計メモ
すべての視覚判断を再現可能にする。
意図した制約を使う
任意の数値ではなく、間隔、比率、形状の規則から始めます。
文脈の中でコントラストを見る
実際の背景と文字サイズで色を判断します。
生成 CSS を読む
本番へ加える前に、値とブラウザ対応を確認します。
始める前の確認
このページのどのツールがローカルで動作しますか？
現在掲載されているツールは、入力をアップロードせずブラウザ内で処理します。今後クラウドまたはハイブリッド処理を追加する場合は、利用前に明示します。
変換すると元データは変わりますか？
Toolars はブラウザ上の複製を処理します。自分で保存して置き換えない限り、元のファイルや文章は変わりません。
ツールをお気に入りにできますか？
はい。まずサインインすると、お気に入りがアカウントに保存され、完了後にそのツールへ戻ります。
誤った結果を報告するには？
各ツールページに報告フォームがあります。送信されるのは、入力したメッセージと選択したページ情報だけです。
このカテゴリーに必要なツールがありませんか？
入力、変換内容、期待する結果を教えてください。