みなさんこんにちは！おさかなです！
今回は「Shadow Palette Generator」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・マウス操作でCSSの影を生成したい方
・影ジェネレーターを探している方
・Webデザインに携わっている方
「Shadow Palette Generator」って何？
「Shadow Palette Generator」とは、CSSの影デザインを作成できる、ジェネレーターのことです。WebブラウザがあればOK！マウス操作で、パラメータを変更することで、影の形をカスタマイズできます！(いいね👍)
https://www.joshwcomeau.com/shadow-palette/
https://osakanav.com/underline-generator
実際に使ってみよう！
それでは早速サイトにアクセスしましょう！
(マウス乗せると動く〜おもしろい🎉)
影の形をカスタマイズ！
「Oomph」からは、影の雰囲気をカスタマイズできます。(ふむふむ…。)
Oomphが0の場合は、影が小さくなります。
「Oomph」を最大の1にすると、影が大きくなりました！(お〜！)
「Crispy」では、影の粒っぽさを変えられます。
Crispy0の場合
Crispy1の場合
https://osakanav.com/semblance-a-frontend-design-quiz
(少し休憩🍵)
影の位置・カラーをカスタマイズ！
左下のメニュー「Light Position」では、◯を動かすことで、光の当たり具合を変えられます。(いいね🌅)
◯を右下に移動させると、影は左上になりました！(雰囲気変わる！)
◯を左下に移動した場合は、こんな感じです。(おお！)
(目がまわる〜〜〜🍭)
「Background Color」からは、背景色を変更できます！
色の濃さによっても、影の見え方が変わるので色々と試してみるといいでしょう！(よーし！)
CSSコードを取得しよう！
ページをスクロールすると、「CSSコード」が確認できます。(ふむふむ…。)
コードをコピーする際は、「Copy CSS」を押せばOKです！(わーい☕)
色々不安すぎるけど、不安は行動でしか解消できないと思う。
陰の努力ってやつだねー
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
https://osakanav.com/flexbox-froggy
