クイックリンク

まだお気に入りがありません。よく使うツールを追加して、すぐにアクセスできるようにしましょう。

3Utils

CSSシャドウ生成

影の設定

プリセット

シャドウプレビュー

CSSコード

.element {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 1);
}
? よくある質問

どのような CSS シャドウ プロパティを生成できますか?

このツールは、ボックスシャドウ(要素用)とテキストシャドウ(テキスト用)を生成します。水平/垂直オフセット、ぼかし半径、スプレッド半径(ボックスのみ)、色、インセットシャドウを制御できます。複数のシャドウを重ねることもできます。

リアルな影の効果を作成するにはどうすればいいですか?

リアルな影は、ぼかし具合や不透明度が異なる複数のレイヤーの影を使って、実際の光を模倣します。まず、オブジェクトの近くにシャープで暗い影を描き、そこから柔らかく明るい影を加えて奥行きを表現します。

ぼかしと広がりの違いは何ですか?

ぼかし半径は、影のエッジの柔らかさ(ぼかし具合)を調整します(大きいほど柔らかくなります)。スプレッド半径は、ぼかす前の影のサイズを拡大または縮小します。スプレッドはボックスシャドウでのみ使用でき、テキストシャドウでは使用できません。

内側の影を作成できますか?

はい!「inset」キーワードは要素の内側に影を作成し、凹んだ、あるいははめ込まれたような外観を実現します。これは、押されたボタンやインデントされた表面を作成するのに最適です。

ライブプレビューは表示されますか?

はい、ジェネレーターは影のパラメータを調整するとリアルタイムで視覚的なプレビューを提供します。影がどのように見えるかを正確に確認し、生成されたCSSコードをスタイルシートに直接コピーできます。

私のデータは安全ですか?

はい、もちろんです!このツールはブラウザ内で完全に動作します。データ処理はすべてデバイス上でローカルに行われ、サーバーにアップロードされることはありません。ファイルやデータはコンピューターから外部に漏れることがないため、完全なプライバシーとセキュリティが確保されます。