CSSグラデーションのCSS文字列を作る方法

CSSグラデーションのCSS文字列を作る

このツールは、2色と角度を指定して、CSSの線形グラデーションまたは円形の放射グラデーションの文字列を作るために使います。完成したCSSを確認しながら、背景色の組み合わせや向きを素早く試したい場合に向いています。画面上の見た目そのものを編集するというより、CSSとして利用できるテキストを得るためのツールです。

入力してCSSを生成する手順

1. 1つ目と2つ目の色を指定します。色の値は入力した内容が生成されるCSS文字列にそのまま挿入されます。別の値を指定しなかった場合、1つ目は #ff6b6b、2つ目は #4ecdc4 になります。

2. 角度を指定します。入力した角度は整数に変換され、360で割った余りに整理されます。変換できない値を指定した場合は45度に戻ります。角度を省略した場合も45度です。

3. グラデーションの種類を選びます。種類を省略した場合は線形です。radial を指定すると、2色を使う円形の放射グラデーションになります。linear の場合は、指定した角度を含む線形グラデーションになります。

4. 生成されたCSS文字列を確認し、必要な場所へコピーします。種類に linear または radial 以外の値を使うと、出力形式は線形グラデーションになります。その場合も、指定した種類の値自体は返されるデータに残ります。

生成結果の見方と注意点

結果は、指定した2つの色を含むCSSのグラデーション文字列として読み取ります。線形の場合は角度が度数で含まれ、放射の場合は円形の放射形式になります。角度に小数や360以上の値を入れたときは、整数化と360を基準にした整理後の値が使われます。

色の値については、別途CSSカラーとして検証されません。入力した文字がCSS文字列へ挿入されるため、利用前に色の記法を自分で確認してください。また、独自の種類名を指定しても専用の形式にはならず、線形形式へ戻ります。

使用例

Webページの背景に青から黄色へ移る斜めのグラデーションを使いたい場合、2色と120度の線形形式を入力してCSS文字列を作成します。

1つ目の色に #3366ff、2つ目の色に #ffcc33、角度に120、種類に linear を指定して生成します。

結果には、指定した2色を含む線形グラデーションのCSS文字列と、指定した種類・角度に対応するデータが含まれます。

制限事項

• 入力された色の値は別途CSSカラーとして検証されず、生成されたCSS文字列へ挿入されます。利用前に色の記法を確認してください。

よくある間違い

• radial と入力したつもりでも別の種類名になっていると、円形の放射形式ではなく線形形式になります。種類の値を radial または linear と確認してから再生成してください。

よくある質問

色を省略するとどうなりますか？

色を指定しない場合は、1つ目に #ff6b6b、2つ目に #4ecdc4 が使われます。

角度を指定しない場合や、360度を超える場合はどうなりますか？

角度を省略すると45度になります。入力値を整数に変換できない場合も45度に戻り、変換できる値は360を基準に整理されます。

放射グラデーションを作るには何を指定しますか？

radial を指定した場合は円形の放射形式になります。linear と radial 以外の値は専用形式にならず、線形形式へ戻ります。