美しいグラデーションがすぐ見つかる！CSSグラデーションジェネレーター5選

@ハクト 2022-02-07 12:50:58に投稿

グラデーションで見栄えを整えたいけど作り方に悩んでいる方は多いのではないでしょうか？

そんな方におすすめなのがグラデーションジェネレーター。WEB上で簡単にカスタマイズしたり、豊富なサンプルからお気に入りのグラデーションをコピペできます。

今回は美しいグラデーションを作成・コピペできる厳選したサイトを5つ紹介します。

CSS GEARS - Gradients Cards

CSSコードだけでなくSketchやXD形式でダウンロードも可能。
スライダーを動かしてカスタマイズもできます。

卵の形をしたグラデーションパターンからコピペできます。
カラーごとにカテゴリ分けされてて便利。

美しくてシンプルなグラデーションサンプルが多数。各サンプルの下部を操作することで色の追加や量、角度を調整できます。UIがかっこいい。

シンプルで使いやすいグラデーションが豊富。プラグインを入れるとFigmaやSketchでも利用できるようになります。画像のダウンロードも可能。

角度や位置をドラッグで自由に調整し直感的にグラデーションが作れます。
透過色・複数色にも対応！

グラデーションジェネレーター css

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。