WebGradients

Web Service

CSSやPNG形式に対応した180種類のグラデーションを活用できる「WebGradients」

WebGradientsは、180種類ものグラデーションが用意されたコレクションを無料で活用できるWebサービスです。好きなグラデーションのCSSコードをコピーできたり、PNG形式のファイルをダウンロードできたり、またはSketchやPSDによるパックなんかも用意されています。

SketchやPhotoshopのパックもある

WebGradients

WebGradientsへアクセスすると、たくさんのグラデーションがズラズラと並んでいます。全部で180種類のグラデーションがあるので、お気に入りのグラデーションも見つかりやすいでしょう。

各グラデーションの右上には下矢印によるアイコンが表示されていて、ここからPNG形式のファイルをダウンロードできるようになっています。

一方、右下には「Copy CSS」と書かれた部分があり、ここをクリックするとそのグラデーションのCSSコードをコピーできます。CSSファイルなどにそのまま直接ペーストできるので、Web制作の時短にも繋がりますね。

左下には実際に使われているカラーコードも記載されています。

グラデーションの部分にカーソルを合わせると、カーソルが虫眼鏡に切り替わります。この状態でクリックすると、そのグラデーションをフルスクリーンでチェックできます。

再度クリックすると元の一覧画面に戻ります。気になるグラデーションを拡大してじっくり見たいという場合に便利ですね。

また、画面の右上には「.SKETCH」「.PSD」と書かれたボタンがあり、ここからSketch・Photoshop(PSD)形式のコレクションパックもゲットできます。まさに、至れり尽くせりなサービスです。

グラデーションはどれもとっても美しくて、見ているだけでいろんなインスピレーションを受けちゃいますね。というわけで、Web制作に役立つグラデーションコレクション「WebGradients」のご紹介でした。

関連記事

  1. Web Service

    サイトのアイコン(ファビコン)を作成できるエディタ「X-Icon Editor」

    サイトのアイコン(ファビコン)を簡単に作成できるエディタ「X-Icon…

  2. Web Service

    文字をペーストするだけで文字数をカウントしてくれるChrome拡張機能「文字数カウンタ」

    何気に入れておけば便利かと思ったのでインストールしてみました。文字をペ…

  3. SimilarSites

    Web Service

    似ているサイトを検索して探してくれる「SimilarSites」

    ちょっと面白かったのでご紹介します。似ているサイトを検索して探してくれ…

  4. Web Service

    自由なサイズやカラー指定でダミー画像を生成できる「PLACEHOLD.IT」

    PLACEHOLD.ITはWeb製作に役立つダミー画像を生成してくれる…

  5. Web Service

    Chromeのダウンロード履歴を自動で消去してくれる拡張機能「Always Clear Downlo…

    ちょっと良さげだったので入れてみました。Google Chromeのダ…

  6. Web Service

    好きな色、パターン、グラデーション、背景画像などを探せる「ColRD」

    好きな色、パターン、グラデーション、背景画像なんかを探すことができる「…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP