美しいCSSボックスシャドウを簡単に作成

直感的なインターフェースで見事なボックスシャドウを生成します。CSSコードをコピーして、すぐにプロジェクトで使用できます。

Preview

ボックスシャドウ

カスタマイズ

CSS 出力

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

シャドウ コントロール

Position

0px
4px

Size

6px
-1px

Color

10%

Options

Presets

ソフトシャドウ

ミディアムシャドウ

ヘビーシャドウ

インナーシャドウ

シャープダイアゴナル

アウトライングロー

ダブルシャドウ

リフトエフェクト

使用方法

基本コントロール

  • を調整します水平オフセット影を左または右に移動するには
  • を調整します垂直オフセット影を上下に移動するには
  • を増やすぼかし半径影を柔らかくする
  • Use スプレッド半径影の全体的なサイズを増減するには
  • を変更します。Color and Opacity影の外観をカスタマイズするには

高度な機能

  • Enable インセットシャドウ内側の影の効果を作成するには
  • Use 複数のシャドウより複雑なエフェクトの場合
  • 保存してロードするPresetsお気に入りの影にすばやくアクセスするために
  • Click ランダムシャドウインスピレーションを得るため
  • 生成された CSS コードをコピーして、プロジェクトに貼り付けます

Related Tools