無料CSSジェネレーター

CSSジェネレーターについて

Absolutoolには、ライブプレビューとコピー可能なコードを備えた12のビジュアルCSSジェネレーターが含まれています。各ジェネレーターでは、スライダー、ハンドル、コントロールで値を調整し、結果を即座に確認できます · CSSの知識は不要です。気に入った見た目になったら、ワンクリックでコードをコピーできます。

私たちのCSSツールは最も求められているプロパティをカバーしています: グラデーション(リニアおよびラジアル)、ボックスシャドウとテキストシャドウ、border-radius、clip path(ポリゴン、円、楕円)、グラスモーフィズム、アニメーション用の3次ベジェ曲線、純粋なCSSでの三角形、ローディングスピナー、背景パターン、単位変換。CSSを学ぶ初心者にも、視覚的にスタイルを微調整したい経験豊富な開発者にも最適です。

なぜ CSS のビジュアルジェネレーターが重要なのか

linear-gradient(135deg, #667eea 0%, #764ba2 100%)、box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)、clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) のようなプロパティを手で書くには、構文を完全に覚え、見る前に視覚的な結果を想像する必要があります。ビジュアルジェネレーターはその順序を逆にします。スライダーをドラッグし、色を選び、プレビューが更新されるのを見て、それから生成されたコードをコピーします。このカテゴリのツールは標準に準拠した CSSを生み出します。それは過去5年間にリリースされたあらゆるブラウザで動き、独自の構文も不要で、プリプロセッサも要りません。

本サイトの各ジェネレーターは、ライブプレビューのペインと一組のコントロールを備えた単一の HTML ページです。値を調整するにつれ、プレビューは、ジェネレーターがコピーして出す本物の CSS を使ってリアルタイムに再レンダリングされます。CSS のふりをする独自のレンダリングエンジンはありません。あなたが見るものが、まさにあなたのユーザーが見るものです。生成されるコードは現代的な構文（適切なところでは CSS カスタムプロパティ、RTL 対応のための論理プロパティ、新しめのカラーツールには OKLCH）を使いますが、古いブラウザのサポートが必要なときには優雅にフォールバックします。ツールごとに設定を1つ下げれば、旧版にやさしいバリエーションに切り替えられます。

ブラウザのサポートとベンダープレフィックス

CSS の仕様は2018年以来、目覚ましく安定しています。グラデーション、変形、影、アニメーション、flexbox、grid、clip-path はすべて、主要なすべてのブラウザ（Chrome、Firefox、Safari、Edge）でプレフィックスなしに動きます。いまだにプレフィックスを必要とする一握りのプロパティは、ほとんどが実験的なものです（古い Safari の CSS subgrid、スクロール駆動アニメーション）。ジェネレーターは既定でプレフィックスなしの標準 CSS を出力し、それをそのままスタイルシートに貼り付けられます。backdrop-filter（グラスモーフィズムのジェネレーターで使われます）は最後まで遅れていた一般的なものでしたが、安定版の Firefox 103（2022年7月）で揃い、Safari は -webkit-backdrop-filter を通じて何年も前から対応しています。現代のプロジェクトでは、これらのツールがカバーするプロパティに autoprefixer が必要になることはめったにありません。

Internet Explorer 11 を狙っているなら（消えゆく、しかし一部の企業イントラネットには実在する利用者層です）、ここのほとんどのプロパティにサポートはありません。grid ジェネレーターは優雅にフォールバックします。IE11 は単純なレイアウトには十分似た、より古い grid の構文に対応するからです。しかし subgrid や gap のような高度な機能はレンダリングされません。現代の利用者層には、経験則は「これらのツールが生む標準の構文を使い、プレフィックスは飛ばし、残るごくわずかな IE の利用者層が簡略化されたレイアウトを見ることを受け入れる」です。caniuse.com は、確信が持てないどんなプロパティについても、依然として決定版の参照です。

パフォーマンス上の考慮

視覚効果はすぐにパフォーマンスの罠になりかねません。多層の box-shadow はフレームごとに一度描画され、これは安価です。一方、固定ヘッダー上の filter: blur(20px) はスクロールのたびに再描画を強い、モバイルでフレームレートを落とし込みます。三次ベジェのツールは、感触の正しいアニメーションの曲線に調整する助けになります。それをアニメーションする要素上の will-change: transform と組み合わせると、ページを再描画するのではなく GPU でアニメーションを合成する用意がブラウザに保たれます。一般則はこうです。transform と opacity をアニメーションする。それ以外のすべて（幅、高さ、top、left、色）はレイアウトや描画を引き起こすので、アニメーションでは控えめに使うべきです。

グラスモーフィズムのジェネレーターは、ここの視覚効果の中で最も重いものです。backdrop-filter: blur(20px) は、ガラスの要素が見えるフレームごとに、背景を取り込み、ぼかし、合成し直すことをブラウザに強いるからです。専用グラフィックスを備えたデスクトップではこれは見えませんが、中位の電話ではフレームレートを 60 fps から 30 fps に下げることがあります。CSS パターンのジェネレーターは SVG ベースのパターンを生み、そのコストは無視できます。ローダーとアニメーションは、transform/opacity をアニメーションしている限り滑らかに保たれます。デザインがぼかしの層を3つ以上重ねるなら、公開する前に中位の電話でテストしてください。「優雅」と「カクつく」の違いは、たった1つ余分な層かもしれません。

デザインシステムにおける CSS

現代のデザインシステムは、色、間隔、立体感をカスタムプロパティ（CSS 変数）として表し、それからその上にコンポーネントのスタイルを築きます。ここのジェネレーターは、コンポーネントにそのまま貼り付けられる直接の値を出力しますが、システムのトークンを収穫するのにも同じく役立ちます。深さの増す box-shadow を3つか4つ、あなたの --shadow-sm、--shadow-md、--shadow-lg のトークンにコピーします。2つのグラデーションを --bg-primary と --bg-secondary にコピーします。一連の border-radius の値を --radius-sm などにコピーします。ジェネレーターは、数字を当て推量してページを更新するのではなく、これらの決定を視覚的に下す助けになります。

CSS Grid ジェネレーターは、名前付きの線を伴う grid-template-columns と grid-template-rows を出力します。これがシステムに欲しいものです。Flexbox ジェネレーターは flex レイアウトに対して同じことをします。どちらも、クラスや Tailwind のコンポーネントにそのまま包めるコードを生みます。Tailwind を使うプロジェクトでは、値はしばしばそのまま翻訳できます。1rem の間隔は gap-4 に、0.5rem の枠の角丸は rounded-md になります。Tailwind を使わないプロジェクトでは、生の CSS 変数がたいてい、デザインシステムのファイルに欲しいものそのものです。視覚的に選ぶというステップが、簡単には自動化できない部分です。

よくある質問