UIデザインに適した美しいグラデーションを簡単に作成できる無料ツール・無料素材のまとめ

Webデザインやスマホアプリに使用されるグラデーションも最近では進化しています。一昔前までは、パステル系のグラデーションが人気でしたが、最近では2色を使用した鮮やかなグラデーションや同一色相のグラデーションが注目されています。

UIデザインのコンポーネントや背景にぴったりな美しいグラデーションを作成できる無料ツール・無料素材を紹介します。

まずは、リリースしたばかりの新しいツールから。

CSS Colour Gradients with GradPad

表示されている2つのポイントを使用して、直観的に美しいグラデーションを作成できます。下のバーではカラーや位置、不透明度が調整でき、ギャラリーからグラデーションを呼び出すこともできます。不透明度が調整できるのは、これが初だと思います。

Egg Shape Background Gradients

タマゴ型のかわいいグラデーションが満載です。168種類のテーマが用意されており、さまざまなデザインに利用できます。

shade

グラデーションに使用するカラーの色相、彩度、明度を調整することで、美しいグラデーションを簡単に作成できます。

Grabient

UIデザインに適した美しいグラデーションを作成できます。各グラデーションはカラーの調整、角度、量など、細かい調整にも対応しています。

0to255

最近のUIデザインは同一色相のカラーを使用し、コンテンツの階層を作成したり、ボタンのステータスを表現したり、トレンドの一つになっています。指定したカラーからより暗い・より明るいカラーを作成します。

uiGradients

Webデザインやイラストのインスピレーションが刺激されるグラデーションがまとめられています。ベースカラーを選択すると、そのカラーにあった美しいグラデーションが表示されます。

Hue

文字や画像を配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景がまとめられています。

Super Gradient

グラデーションのタイプとカラー、そのカラーが始めるポイントを指定するだけで、簡単に美しいグラデーションが描けるSassのmixinがまとめられています。

coolhue

最近のWebサイトやスマホアプリのデザインで人気が高い、色相を変化させた美しいグラデーションがまとめられています。Photoshop, Sketchのグラデーション素材として、またコードベースで利用することもできます。

Gradient World

世界中の美しい自然にインスパイアされたグラデーションがまとめられています。定番の夕焼けをはじめ、水、森、砂・雪など、美しいグラデーションが利用できます。グラデーションのステップ数、角度、彩度も細かく調整できます。