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

    Macで簡単に画像を切り取ったりぼかしやモザイクを入れることができるアプリ「ToyViewer」

    ToyViewerというMacのアプリを使ってみました。起動や動作も早…

  2. Web Service

    iPhoneアプリのRead it LaterがPocketにリニューアルしたので使ってみたらヤバか…

    ふと、iPhoneを弄っていたらアップデートできるアプリがあったのでし…

  3. Web Service

    住所や建物名を入力するとGoogleマップの座標を取得することができる

    地図上で、ある地点の座標を知りたいといった時があるかと思います。そんな…

  4. Show Title Tag

    Web Service

    Webページの長いタイトルを画面隅っこに表示させることができるChrome拡張機能「Show Tit…

    Webページを見ている時にタイトルを確認したい時ってありますよね。Ch…

  5. Web Service

    夜フクロウで複数のTwitterアカウントを使うためのアカウント追加方法

    Twitterクライアントで人気の高い夜フクロウを使い始めました。メイ…

  6. Web Service

    かっこいいボタンやフォーム、かわいいリボンなんかが作れるCSSジェネレーター「Live Tools」…

    とても簡単にかっこいいボタンやフォームが作れちゃうCSSジェネレーター…

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP