CSSグラデーションジェネレーター
2色を選び、線形または放射状のグラデーションを選択し、角度を調整するとリアルタイムでプレビューが表示されます。対応するCSSコードは即座に生成され、そのままスタイルシートにコピーできます。
background: linear-gradient(90deg, #ff9a00, #60acfc);使い方
カラーピッカーで2色を選び、「線形」または「放射状」を選択します。線形グラデーションの場合は角度スライダーをドラッグしてください。プレビューと下のCSSコードは、変更するたびに即座に更新されます。
ヒント
角度90degは左から右、180degは上から下、0degは下から上に流れます。スライダーを動かして、方向がどう変わるか試してみてください。
線形と放射状の違いは何ですか?
線形グラデーションは設定した角度に沿って直線上に変化します。放射状グラデーションは角度に関係なく中心から外側へ円形に広がります。
このカテゴリの他のツール
露出計算機
絞り、シャッタースピード、ISOの間で等価露出を求めます。
アスペクト比計算機
画像や動画を比率を保ったまま拡大縮小し、簡略化した比率を求めます。
コントラストチェッカー
前景色と背景色がWCAGコントラストガイドラインを満たしているか確認します。
カラーパレットジェネレーター
任意のベースカラーから、補色・類似色・トライアド配色のパレットを生成します。
カラーフォーマット変換ツール
色をHEX、RGB、HSL、CMYKの間で即座に変換。各形式をワンクリックでコピーできます。
タイポグラフィスケールジェネレーター
基準フォントサイズと拡大比率から、調和の取れたフォントサイズのセットを生成し、CSSカスタムプロパティとしてコピーできます。