CSS 生成
商用OK
380+モデル
透かしなし
登録は不要
モデル:
+ GPT-5, Claude, Gemini
Describe a layout or component and get modern CSS3 - Grid + Flexbox, custom properties, container queries, color-mix(), :has() selectors, prefers-reduced-motion. Mobile-first by default. Self-hosted Qwen 3 Coder is free under the daily pool; premium models nail complex multi-component design systems.
追加オプション
結果
証券が足りない
もっとトークンを取得
もっと欲しい？
無料登録で1日30Kトークン＋10Kボーナス
無料登録
ご要望を処理中...
無料でAIでCSSコードを生成します。
使い方 CSS 生成
1
入力を入力
テキストを入力、ファイルをアップロード、または必要なことを記述します。アカウントは必要ありません。
2
クリックして生成
私たちのAIは、最良のオープンソースモデルを使って、あなたの要求を数秒で処理します。
3
ダウンロードと共有
結果をダウンロード、コピー、共有できます。個人的、商業的な使用は無料です。
このツールを API で使用
あなたのコードからこのツールを自動化します。OpenAI 互換の REST エンドポイント、ベアートークン認証、追加の SDK が必要ありません。トークンのコストはウェブインターフェースと一致します。
curl -X POST https://api.free.ai/v1/chat/ \
-H "Authorization: Bearer sk-free-..." \
-H "Content-Type: application/json" \
-d '{"model": "qwen-coder", "messages": [{"role": "user", "content": "Write a Python function that reverses a string."}]}'CSS 生成 — FAQ
現代的なCSS3 - グリッド + Flexbox レイアウト、カスタムプロパティ (CSS 変数)、コンテナクエリ、color-mix()、:has() 選択子、論理的なプロパティ、prefer-reduced-motion フォルバック。8 つのスタイルプレセット (Vanilla / Tailwind config / Sass / CSS モジュール / BEM / Atomic ユーティリティ / Print スタイルシート / アニメーション)。デフォルトではコンテナクエリがメディアクエリを上回るモバイル優先である。
はい - 完全なコンポーネントスタイルシートは Qwen 3 Coder で 1,000 個のトークンを必要とします。2,500 人の匿名 / 10,000 人の登録者の日々のプール内で使用できます。複雑な多コンポーネント設計システムに対しては、コールごとに Premium Claude Sonnet / GPT-5 が利用できます。
これは、React と Tailwind の両方のコンポーネントを生成するためのツールです。
はい - テーマのための CSS カスタムプロパティ、カスケード制御のための @layer、親に対するサイズ調整がビューポートを上回るコンテナクエリ (@container)、親ベースのスタイリングのための :has()、アクセシビリティのための color-mix() や OKLCH のような色関数。必要なときは優雅に戻ります。
Tailwind の設定プレセットを選択します。出力は tailwind.config.js に接続された Tailwind 3.x ユーティリティクラスです。テーマのカスタマイズを要求すると、同時に生成されます。クラスを包む HTML マークアップの場合は、 /code/html/ に切り替えて Tailwind のプレセットを選択します。
Sass プレセットを選択します。出力は @use モジュールを含む.scss 構文を使用します (廃止された @import ではありません)。明瞭性を助けるためにネスティング (装飾ではありません)、再利用可能なパターンに @mixin、値計算に @function を使用します。Dart Sass 1.50+ と互換性があります。
アニメーションプレセットを選択します。出力はキュービックベジエタイミングの @キーフレームを使用します。 アクセシビリティのためにオーバーライドを減らし、アニメーションを行うプロパティのみを変更します。 CSS のみの使用 (変換、不透明度) が可能な場合は、CSS をサポートしていない効果のみに JavaScript フックを推奨します。
両方 -.block__element--modifier 命名の場合は BEM を選択し、単一目的のクラスの場合は Atomic ユーティリティを選択します。命名衝突のないコンポーネントスコープCSSの場合は、ローカルスコープクラス名を生成する CSS モジュールを選択します。
はい - すべてのプリセットは [data-theme=dark] をオフにした CSS カスタムプロパティと prefers-color-scheme:dark メディアクエリのフォルバックを使用します。テーマを切り替えると、1 行の属性スワップで CSS を再コンパイルしません。Tailwind プリセットは内蔵 dark: 変数を使用します。
永続的な Chrome/Firefox/Safari (最近の2つの安定版) をターゲットにしています。Safari 16+ が重要な場所では、最先端の機能 (:has(), container queries) のために @supports ブロックを使用します。古い Safari が問題になる場所では、flexbox に戻ります。IE11 サポートのためには、出力を手動でバックポートレートするには /code/refactor/ を使用してください。
印刷スタイルシートプレセットを選択します。出力は @mediaprint ですべてを包み込み、背景の color-adjust: exact を設定し、nav とクロムを隠し、画像のサイズを合理的に調整し、カートに break-inside: avoid を使ってページをきれいに切り分けます。ページの方向ヒントは @page を使って提供されます。
はい - POST は /v1/chat/ に同じシステムプロンプトで送信されます。このページがビルドされています。ベアラー認証、速度制限。デザイントークンパイプラインやコンポーネントライブラリ生成に適しています。ドキュメントは /api/ にあります。
このツールをどう評価しますか？