CSSシャドウ生成 (box-shadow)
オフセット・ぼかし・広がり・色・不透明度を調整してCSS box-shadowコードを作り、リアルタイムプレビューで確認できます。insetにも対応し、すべてブラウザ内で処理されます。
- CSS
- box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
よくある質問
각 값은 무엇을 의미하나요?
가로/세로 오프셋은 그림자의 위치, 블러는 흐림 정도, 확산(spread)은 그림자의 크기 확대/축소입니다. 확산에 음수를 주면 그림자가 요소보다 작아져 자연스러운 카드 그림자를 만들 수 있습니다.
여러 겹 그림자는 어떻게 만드나요?
box-shadow는 쉼표로 여러 그림자를 나열할 수 있습니다. 이 도구로 각 겹을 만들어 '0 1px 2px …, 0 8px 24px …'처럼 이어 붙이면 더 입체적인 그림자가 됩니다.
inset은 언제 쓰나요?
inset은 그림자를 요소 안쪽에 그립니다. 눌린 버튼, 오목한 입력창, 내부 하이라이트 표현에 사용합니다.
関連ツール
テキストと背景色のコントラスト比を計算し、WCAG 2.x AA・AAAアクセシビリティ基準の合否を判定します。すべてブラウザ内で処理されます。
基準色から明るいトーンと暗いトーンのHEXパレットを生成します。デザインシステムの色階調づくりに便利で、処理はすべてブラウザ内で行われます。
px・rem・em・pt・% を基準フォントサイズに合わせて相互変換します。レスポンシブタイポグラフィに便利で、すべてブラウザ内で処理されます。
HEX, RGB, HSL 색상 코드를 상호 변환하고 미리보기로 확인합니다.
最小・最大サイズとビューポート範囲からレスポンシブなclamp()コードを生成します。メディアクエリなしでフォントサイズが画面幅に応じて滑らかに変わるfluid typographyに使えます。すべてブラウザ内で処理されます。
CSSからコメントと不要な空白を除去してサイズを削減します。文字列値は保持され、処理はすべてブラウザ内で行われます。