Webspe Tools

クレイモーフィズムCSSジェネレーター

粘土のような立体感と柔らかみが特徴的な、クレイモーフィズムを実装するためのCSSを生成します。
影の方向や立体度をカスタマイズできます。シャドウの詳細設定でさらに細かい設定も可能です。
出力されるCSSコードをコピペで簡単に使えます。

スポンサーリンク

カスタマイズ

ボックス

▼ サイズ(プレビュー用)

px
px

px

シャドウ

▼ シャドウの方向

CSSコード

background-color: #62CDFF;
border-radius: 40px;
box-shadow: 12px 12px 18px rgba(0, 0, 0, 0.3), inset -12px -12px 18px rgba(0, 0, 0, 0.3), inset 12px 12px 18px rgba(255, 255, 255, 0.6);

使用上の注意

  • モダンブラウザでの使用を想定しており、IEや古いバージョンのブラウザではサポートされていないCSSプロパティを含む場合があります。
  • 当サイトのリセットCSSは「modern-normalize.css」をベースにしています。ご自身のプロジェクトで利用するリセットCSSやその他のCSSによって、プレビューの見た目と差異が生じる場合があります。

\ SNSでシェア /

スポンサーリンク

関連ツール