様々なグラデーションがまとめられていて、CSSをコピーしたりPNG画像をダウンロードできる「WebGradients」

様々なグラデーションがまとめられていて、CSSをコピーしたりPNG画像をダウンロードできる「WebGradients」

様々なグラデーションがまとめられていて、CSSをコピーしたりPNG画像をダウンロードできる「WebGradients」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

WebGradientsは、様々なグラデーションがまとめられているサイトです。気に入ったグラデーションがあったら、グラデーションを表現するためのCSSをコピーしたり、PNG画像をダウンロードすることができます。

スポンサードリンク

WebGradientsの使い方

CSSのコピー

WebGradientsにアクセスして、グラデーションの右下に表示されている[Copy CSS]をクリックします。

CSSのコピー

以下のようなCSSがコピーされます。

background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
PNG画像のダウンロード

グラデーションの右上にあるダウンロードボタンをクリックすると、PNG画像が別タブで開くのでダウンロードします。

グラデーションのダウンロード

Photoshop・Sketch用のファイルダウンロード

サイト右上にあるメニューからは、PhotoshopやSketch用のファイルもダウンロードすることができます。

Photoshop・Sketch用のファイルダウンロード

あとがき

きれいなグラデーションが色々あって、非常に参考になります。きっと気に入るグラデーションが見つかると思いますので、ぜひチェックしてみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。