ブログ
 

CSSをコピーできるグラデーションジェネレーター

       

今回はCSSでグラデーションを指定する際に役立つ、CSSをコピーできるグラデーションジェネレーターをご紹介したいと思います。

1. CSS Gradient


URL:https://cssgradient.io/

2色を指定して円形グラデーションや線形グラデーションを作ることができるサイトです。
角度を指定することはもちろん、画像をアップロードして色を抽出するといった細かなカスタマイズを行えます。
下部にCSSが表示されるのでそこからCSSをコピーすることができます。

2. MESHER


URL:https://csshero.org/mesher/

こちらはメッシュグラデーションを作ることができるサイトです。
画面上の点を動かすことでグラデーションの位置を変えることができます。また、「Rondomize」ボタンを押すとランダムにグラデーションを作成してくれます。
CSSのコピーは右下にある「Export」ボタンから行うことができます。

3. CSS Shadow Gradients


URL:https://alvarotrigo.com/shadow-gradients/

最後に、影をグラデーションにする際に参考にできるサイトです。
位置や大きさ、透明度などを指定することができ、「CSS Shadows Gradients Collection」にあるカラーパレットの色を変更することもできます。
カラーパレットにカーソルを合わせると出てくる右上の「COPY CSS」をクリックするとCSSをコピーできます。

今回ご紹介したサイトはいずれも、
・直感的に使える
・プレビューができる
・CSSをコピーできる
の3点が共通している使いやすいサイトだと思います。
ぜひ使ってみてください。

 
  • このエントリーをはてなブックマークに追加