ニューモーフィズムを作れるCSSジェネレータサイトまとめ

おそらく二つが選択肢.

どちらも使い勝手は悪くないので、好きな方を使えればよいはず。

Neumorphic Design

簡単で使いやすい. CSS全部をコピーすることもできるし、一部も可能. 簡単設定モードと調整可能モードがある.

特徴
  • 1ページ目(簡単設定)
    • 形状 : 矩形と円の凸凹
    • 色 :プリセット28色から選択
  • 2ページ目(オプション設定 : Next/Backを押す)
    • 大きさ Size
    • 角の曲がり具合(矩形⇔円) Corner Radius
    • 浮き具合(高さ) Elevation
    • 影のボケ具合 Blur
    • 影の強さ Intensity
    • 面のどこボコ具合 Concavity
    • 全体の凹凸 inset
    • 色 Color
リンク

https://neumorphic.design/

Neumorphism.io

こちらも似たような感じであるが、違いは、照明方向を調整可能. 設定画面は上記のみ. 形状の選び方がわかりやすいが調整はできない.

特徴
  • 照明方向を4すみから選択
  • 色を選択
  • Size : 大きさ
  • Radius : 角の半径
  • Distance : 浮き具合
  • Intensity : 影の強さ
  • Blur : 影のボケ具合
  • Shape : 形状
リンク

https://neumorphism.io/

About the author

コメントを残す