CSSグラデーションジェネレーター
グラデーションをビジュアルでデザインして、CSS をワンクリックでコピー。
- グラデーションの種類（リニア・放射・コニック）を選択します。
- 角度スライダーをドラッグして方向を調整します。
- カラースウォッチをクリックしてカラーピッカーを開くか、HEX コードを直接入力します。
- 位置スライダーをドラッグして各カラーストップを移動します。
- 「ストップを追加」で色をさらに追加、× ボタンで削除できます。
- プリセットから選ぶと素早くスタートできます。
- 「コピー」ボタンで CSS をコピーし、スタイルシートに貼り付けるだけです。
ヒント：生成した CSS は background または background-image プロパティに直接貼り付けられます。すべての最新ブラウザで動作します。
どんなときに使う？
- ヒーローセクション・ボタン・カードにグラデーション背景を追加するとき。
- 画像の上に半透明グラデーションをオーバーレイするとき。
- デザイン確定前に配色の組み合わせをすばやく試したいとき。
リニア・放射・コニックの違いは？
リニアは指定した角度の直線方向に色をブレンドします。放射は中心から楕円または円形に広がります。コニックは中心点を軸に色が回転し、円グラフのような効果を生みます。
透明を使ったグラデーションにするには？
CSS 出力の HEX を rgba(99, 102, 241, 0) に書き替えるか、transparent キーワードを使用します。すべての最新ブラウザで対応しています。
出力 CSS はブラウザ間で互換性がありますか？
リニアと放射グラデーションはすべての最新ブラウザ（Chrome・Firefox・Safari・Edge）でプレフィックス不要で動作します。コニックグラデーションはすべてのエバーグリーンブラウザに対応しています。
カラーストップは 2 つ以上追加できますか？
はい。「ストップを追加」を何度でもクリックできます。CSS 仕様にストップ数の上限はありません。
画像フォーマットの選び方：JPG・PNG・WebP・GIF の違いと使い分け完全ガイド
なぜ PNG はJPGより何倍も大きくなるのか？WebP はいつ使うべきか？GIF はもう古いのか？圧縮の仕組みから解説し、状況別に最適なフォーマットを選ぶ判断軸を整理します。
色彩コントラストとアクセシビリティ：WCAG基準・コントラスト比の計算原理と改善テクニック
色彩コントラスト比はアクセシブルなWebデザインの中核指標で、弱視・色盲・一般ユーザーのさまざまな環境での読みやすさに影響します。WCAG 2.1のAA/AAAレベル・相対輝度計算公式・よくある設計ミスと修正策を解説します。
カラーコード完全ガイド：RGB・HEX・HSL の変換原理とデザイン活用
RGB・HEX・HSL はすべて同じ色を表しますが、まったく異なる方法で記述します。本記事では各色モデルの設計思想・変換の数学・使い分けの基準から、WCAG アクセシビリティ対応まで徹底解説します。
SNS投稿の画像編集フロー：サイズ設計・ビジュアル統一・書き出し設定
SNS用クリエイティブの品質は、アイデアだけでなく制作フローで決まります。サイズ、構図、ブランド統一、書き出し設定まで、再現性のある画像編集手順を解説します。
Markdown完全ガイド：基本文法から実践活用まで
Markdownは、ライター・開発者・コンテンツクリエイターに最も使われている軽量マークアップ言語です。基本文法から高度なテクニック、各プラットフォームでの活用方法まで完全解説します。
PDF の結合・分割・圧縮ガイド：日常の文書整理を完全攻略
大きな PDF から必要なページだけ取り出したい、複数のレポートを1つにまとめたい、ファイルが大きすぎてアップロードできない――よくある PDF の悩みを、インストール不要で解決する方法を解説します。