デザインツール
デザイナー向けのカラー、タイポグラフィ、レイアウト、ビジュアルツール。
CSSを手探りで書くのはもうやめましょう。各ジェネレーターはリアルタイムプレビュー付きのビジュアルコントロールと、ワンクリックでコピーできるプロダクション対応のCSSを提供します。FlexboxやGridのレイアウトをドラッグ＆ドロップで構築し、スライダーでグラデーションやシャドウを作成し、@keyframes構文を覚えなくてもローダーやアニメーションを生成できます。すべてのツールがクリーンで標準準拠のCSSを生成し、すべてのモダンブラウザに対応しています。
Layout Generators
スペーシングスケールジェネレーター
一貫したスペーシングシステムの生成
CSS Flexbox ジェネレーター
Flexboxレイアウトをビジュアルで構築
CSS Grid ジェネレーター
CSS Gridレイアウトをビジュアルで構築
Color Tools
カラーパレットジェネレーター
調和のとれたカラーパレットを生成
グラデーションジェネレーター
リアルタイムプレビュー付きCSSグラデーションの構築
コントラストチェッカー
WCAG AA/AAA アクセシビリティのコントラスト検証
色覚シミュレーター
色覚特性のシミュレーション
ティント＆シェード
色の明るい・暗いバリエーションを生成
画像カラー抽出
任意の画像からカラーパレットを抽出
Typography
タイプスケールジェネレーター
CSS出力付きモジュラータイプスケール
行間計算ツール
最適な行間と文字間隔の計算
フォントペアリング
Google Fonts の組み合わせ提案
Text Shadow ジェネレーター
CSS text-shadow のビジュアルビルダー
Visual Effects & CSS
Box Shadow ジェネレーター
CSS box-shadow のビジュアルビルダー
CSS Clip-path ジェネレーター
clip-pathポリゴンのビジュアルビルダー
CSSアニメーションジェネレーター
キーフレームアニメーションビルダー
Border Radius ジェネレーター
CSS border-radius のビジュアルジェネレーター
グラスモーフィズムジェネレーター
backdrop-filterですりガラス効果を作成
CSSローダージェネレーター
CSSのみでスピナーやローディングアニメーションを生成
SVGブロブジェネレーター
ランダムな有機的形状をSVGで生成
Image & Asset Tools
アスペクト比計算
任意のアスペクト比に対する寸法の計算
SVGビューアー＆最適化
SVGコードのプレビューと圧縮
ファビコンジェネレーター
テキストや絵文字からファビコンを生成
プレースホルダー画像
任意のサイズでプレースホルダー画像を生成
よくある質問
生成されたCSSを商用プロジェクトで使用できますか？
もちろんです。当ツールで生成されるCSSはすべて標準的なコードであり、独自仕様ではありません。個人、商用、オープンソースなど、どのプロジェクトでもクレジット表記なしでご利用いただけます。
FigmaやPhotoshopは必要ですか？
いいえ。各ツールはブラウザ内で完結するビジュアルエディターです。デザインソフトウェアは不要です。色を選び、スライダーを調整し、リアルタイムでプレビューし、CSSをコピーするだけです。
生成されたスタイルはすべてのブラウザに対応していますか？
はい。すべてのツールがChrome、Firefox、Safari、Edgeに対応した標準準拠のCSSを生成します。