ベスト・フリー CSS ボックスシャドウ生成
ライブプレビュー、インセット、第二レイヤーを使ってCSSボックスシャドウを視覚的に作成します。コードをコピーします。
100%フリー
登録なし
透かしなし
メモリで処理されたファイルは保存されません
ラブ best.free? 分けて
仕組み
- スライダーを移動. オフセット、ぼかし、拡大、色、不透明度を設定します。内部の影を作成するには、インサートを切り替えてください。
- プレビューを見る. ドラッグするとライブボックスが更新されます。深さのために、 詳細オプションで二つ目のレイヤーを追加します。
- CSS をコピー. CSS をコピーして、ボックスシャドウルールを直接スタイルシートに貼り付けます。
このツールの情報
ピクセル値を推測することなくボックスシャドウをデザインします。オフセット X, オフセット Y, ぼかし, 広がりスライダーをドラッグし、影の色を選択し、不透明度を調整します。リアルタイムでボックスのプレビューを見て、正確なボックスシャドウCSSをコピーします。内部影のためにインサートのトグルを回転します。高度なオプションは二番目の影レイヤーを積み重ねます。それで、現代のカードやボタンに使われる柔らかく、多層の影を作成できます。すべてブラウザで実行されます。
人々がそれを使うために
- カードやモダルに柔らかい落とし影を追加
- 入力と井戸に内側の影を作成
- 二つのレイヤーを積み重ねて現実的な散乱影を作成します
- デザインモックアップに合わせてオフセットとブルームを調整します
よくある質問
オフセット-X/Y は影を水平方向と垂直方向に移動させ、ぼかしはその縁を柔らかくし、ぼかしを適用する前に影全体を拡大または縮小します。ライブプレビューはすべての変更を即座に表示します。
Inset はエレメントの後ろではなく、エレメントの内部に影を描画します。これは押し込みのような印象を与えます。入力やトグルに役立ちます。Inset トグルを反転させてスイッチを切り替えます。
色を選択し、不透明度スライダーを使ってください。ツールは rgba() 値を出力します。
はい。 二番目の影レイヤーをオフセット、ブルーム、色、インサートを持つようにするには、「高度なオプション」を開きます。
ブラウザの設定を変更するには、 ブラウザの設定を変更します。
完全に無料で、アカウントも制限もありません。 計測するものが何もないクライアントサイドツールです。
CSS Box Shadow Generator はブラウザ上で動作します。デスクトップと同様に携帯電話やタブレットでも動作します。インストールするアプリはありません。
CSS Box Shadow Generator は、入力を入力するとすぐに動作します。
普段の使用は無制限で、 寛大なフェアユースの下で、 誰もが速く保つ。
Chrome、Safari、Firefox、Edgeなどのすべての最新のブラウザ。CSS Box Shadow Generator は、既に使用しているブラウザ以外のインストールは必要ありません。