CSS Box Shadow 생성기 - 그림자 시각 편집 온라인
비주얼 컨트롤로 CSS box shadow 디자인. 다중 레이어 그림자, 뉴모피즘 효과 제작 및 CSS 코드 복사.
자주 묻는 질문
CSS box-shadow란 무엇인가요?
CSS box-shadow는 요소의 프레임 주위에 그림자 효과를 추가하는 속성입니다. 웹 디자인에서 깊이감, 높이감, 시각적 계층 구조를 만들 수 있습니다. 이 속성은 가로 오프셋, 세로 오프셋, 블러 반경, 확산 반경, 색상, 그리고 안쪽 그림자를 위한 inset 키워드를 매개변수로 받습니다.
이 box shadow 생성기는 어떻게 사용하나요?
슬라이더를 조절하여 가로/세로 오프셋, 블러, 확산, 투명도를 설정하세요. 색상 피커로 그림자 색상을 선택하세요. 안쪽 그림자가 필요하면 'Inset'을 토글하세요. 복잡한 효과를 위해 여러 레이어를 추가할 수 있습니다. 생성된 CSS 코드를 스타일시트에 복사하세요.
뉴모피즘이란 무엇인가요?
뉴모피즘(또는 Soft UI)은 두 개의 그림자(빛을 시뮬레이션하는 밝은 그림자와 그림자를 시뮬레이션하는 어두운 그림자)를 결합하여 부드럽고 돌출된 플라스틱 느낌을 만드는 디자인 트렌드입니다. 효과가 제대로 작동하려면 배경색이 요소 색상과 일치하거나 보완되어야 합니다.
부드럽고 사실적인 그림자는 어떻게 만드나요?
사실적인 그림자는 점진적으로 증가하는 블러와 오프셋을 가진 여러 레이어를 사용합니다. 이 도구의 'Layered' 프리셋은 여러 그림자 레이어를 쌓아 이 효과를 자동으로 만듭니다. 수동으로 레이어를 추가하고 값을 점진적으로 조절할 수도 있습니다.
안쪽 그림자(inset shadow)란 무엇인가요?
안쪽 그림자는 요소의 바깥이 아닌 안쪽에 나타납니다. 눌리거나 새겨진 효과를 만들며, 입력 필드, 눌린 상태의 버튼, 컨테이너 웰에 주로 사용됩니다. 'Inset' 체크박스를 토글하여 이 효과를 활성화하세요.
이 도구는 안전하고 개인정보를 보호하나요?
네. 이 도구는 클라이언트 사이드 JavaScript를 사용하여 100% 브라우저에서 실행됩니다. 그림자 설정이나 디자인 데이터는 절대 서버로 전송되지 않습니다. 모든 작업이 완전히 기기에서 이루어져 디자인 작업의 완벽한 프라이버시를 보장합니다.
코드 예제
// Generate box-shadow CSS from parameters
function generateBoxShadow(layers) {
return layers.map(layer => {
const inset = layer.inset ? 'inset ' : '';
const { r, g, b } = hexToRgb(layer.color);
const rgba = `rgba(${r}, ${g}, ${b}, ${layer.opacity})`;
return `${inset}${layer.offsetX}px ${layer.offsetY}px ${layer.blur}px ${layer.spread}px ${rgba}`;
}).join(', ');
}
function hexToRgb(hex) {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : { r: 0, g: 0, b: 0 };
}
// Usage
const shadow = generateBoxShadow([
{ offsetX: 0, offsetY: 4, blur: 6, spread: -1, color: '#000000', opacity: 0.1, inset: false },
{ offsetX: 0, offsetY: 2, blur: 4, spread: -2, color: '#000000', opacity: 0.1, inset: false }
]);
console.log(shadow);
// Output: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1)