カラーコード変換
HEX・RGB・HSL と透明度を変換し、色をプレビューしながら CSS の値をコピーできます。
CSS ボックスシャドウ作成
ずれ、ぼかし、広がり、色、不透明度を調整し、外側・内側の影を確認して CSS を取得できます。
プレビュー
このツールについて
カードの奥行きを調整するときに、ぼかしと広がりを分けて確認できます。負の広がりで影を小さくできます。
使い方
各数値を変えると影が即時更新されます。内側の影を選ぶと inset になります。ずれと広がりは -200～200px、ぼかしは 0～200px、不透明度は 0～100% です。1 層の box-shadow を生成し、コピーや CSS ファイルの保存ができます。
よくある質問
ぼかしと広がりの半径はどう違いますか？
ぼかしは縁を柔らかくし、広がりは輪郭を拡大・縮小します。inset は内側の影です。一度に出力するのは一層なので、複数の影は CSS 上で組み合わせてください。
影を左や上へ動かすには？
水平オフセットを負にすると左へ、垂直オフセットを負にすると上へ動きます。正なら右・下です。出力はボックスの影で、画像の不透明部分の輪郭に沿う影ではありません。
関連ツール
新しいタブで開きます
コメント
0