背景や文字、Box-shadowやグラス背景などに
美しいグラデーションデザインを提案してくれる
Web制作時に便利なWebサービス。
配色など調整も可能でTailwind CSSでコピペ可能です。
![Web制作時の背景や文字、Box-shadowなどを美しいグラデーションを提案してくれるWebサービス 『Gradienty』](https://pc.mogeringo.com/wp-content/uploads/2023/07/gradienty-thumb.jpg)
目次
リンク先
レビュー
![Web制作時の背景や文字、Box-shadowなどを美しいグラデーションを提案してくれるWebサービス 『Gradienty』](https://pc.mogeringo.com/wp-content/uploads/2023/07/gradienry1.jpg)
リンク先を開くと早速たくさんのグラデーションが並んでいます。
画面右上の「Choose Color」から好きな色を選択すると、選択した色を使用したグラデーションを
表示します。
各グラデーションの左側のボタンでランダムに変更、真ん中のボタンはTailwindCSSコードを
取得、コピーすることができます。
![Web制作時の背景や文字、Box-shadowなどを美しいグラデーションを提案してくれるWebサービス 『Gradienty』](https://pc.mogeringo.com/wp-content/uploads/2023/07/gradienry2.jpg)
4種類の機能があり、「Backgrounds」「Text Gradients」「Box Shadow」「Glassmorphism」とあり
Text Gradientsでは文字をグラデーションで装飾できます。
![Web制作時の背景や文字、Box-shadowなどを美しいグラデーションを提案してくれるWebサービス 『Gradienty』](https://pc.mogeringo.com/wp-content/uploads/2023/07/gradienry3.jpg)
画面下部には色々なグラデーションのサンプルがあるので、一覧で見る事でデザインの参考になります。
![Web制作時の背景や文字、Box-shadowなどを美しいグラデーションを提案してくれるWebサービス 『Gradienty』](https://pc.mogeringo.com/wp-content/uploads/2023/07/gradienry4.jpg)
こちらは「Box Shadow」です。Shadowを美しいグラデーションで装飾ができます。
Classにサクッとコピペで美しいBoxShadowを使う事ができます。
![Web制作時の背景や文字、Box-shadowなどを美しいグラデーションを提案してくれるWebサービス 『Gradienty』](https://pc.mogeringo.com/wp-content/uploads/2023/07/gradienry5.jpg)
すりガラスなデザイン、「Glassmorphism」も用意されています。
海外などでは見かけるデザインですが、いつか使ってみたいデザインです。
![Web制作時の背景や文字、Box-shadowなどを美しいグラデーションを提案してくれるWebサービス 『Gradienty』](https://pc.mogeringo.com/wp-content/uploads/2023/07/gradienry6.jpg)
「Customize」でパラメータを調整が可能です。プレビューを見ながら調整できます。
最近よく聞くTailwindCSSでデザインする人にはとても便利なWebサービスです。
コメント