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. Streaksで特定の曜日をスキップ

    Web Service

    継続日数をカウントできるiPhoneアプリ「Streaks」で特定の曜日をスキップさせるやり方

    普段、何か継続・習慣化させたい事がある場合にはiPhoneアプリの「S…

  2. Load Info - gif generator

    Web Service

    ローディング中に表示させるアニメーションGIFを作成できるジェネレーター「 Load Info &#…

    ローディング中に表示させるアニメーションGIFを手軽に作成することがで…

  3. Web Service

    iPadで人気の手書きノートアプリ「Note Anytime」のiPhone版が登場したので使ってみ…

    iPadの手書きノートアプリとして話題となった「Note Anytim…

  4. JTF日本語スタイルチェッカー

    Web Service

    日本語の文章を手軽にチェックできる「JTF日本語スタイルチェッカー」

    JTF日本語スタイルチェッカーは日本語の文章を手軽にチェックすることが…

  5. プレーンテキストでペースト

    Web Service

    Evernoteのペースト時にリッチテキストではなくプレーンテキスト(スタイルなし)にする方法

    意外と活用するシチュエーションが多いのでメモがてらご紹介します。Eve…

  6. FRAME

    Web Service

    iPhoneやMacにスクリーンショットを埋め込んで画像作成できるツール「FRAME」

    FRAMEというとても便利なツールを使ってみました。iPhone、iP…

最近の記事

  1. オリジナルチキン6ピース
  2. 200-DGCAM019
  3. ハクバ GW-PRO RED フォトグローブプロ PL
  4. Soundcore Liberty Air 2

アーカイブ

PAGE TOP