CSS 박스 섀도 생성기

브라우저에서 box-shadow 오프셋, 블러, 스프레드, 투명도, 모서리 반경, inset 을 조절하고 실시간 미리보기와 CSS 복사를 지원합니다.

CSS 박스 섀도 생성기

CSS 박스 섀도 생성기는 브라우저에서 box-shadow 의 가로/세로 오프셋, 블러, 스프레드, 투명도, 모서리 반경, inset 을 조절하고 카드나 버튼의 그림자를 실시간으로 미리 볼 수 있게 해줍니다.

사용 방법

  1. 가로 오프셋, 세로 오프셋, 블러, 스프레드를 조절합니다.
  2. 그림자 색상, 배경 색상, 투명도와 모서리 반경을 설정합니다.
  3. 필요하면 inset 내부 그림자로 전환합니다.
  4. 생성된 CSS 를 컴포넌트 스타일이나 디자인 전달 문서에 복사합니다.

기능

  • 주요 box-shadow 파라미터를 시각적으로 조절
  • 외부 그림자와 inset 내부 그림자 지원
  • 로컬 실시간 미리보기와 CSS 복사 출력

왜 사용할까요?

  • 카드, 버튼, 입력창, 플로팅 표면의 깊이감을 빠르게 조정
  • 그림자 문법을 직접 쓰고 반복 확인하는 시간을 줄임
  • 디자인과 프런트엔드 사이에서 바로 쓸 수 있는 CSS 값을 공유

관련 색상 도구

GIF 메이커

정적인 이미지나 비디오 클립을 동적 GIF로 변환합니다.

이미지 크기 조정

이미지 크기를 일괄 조정하고 픽셀 또는 비율 기준, 비율 고정, 로컬 내보내기를 지원합니다.

이미지 ICO 변환기

이미지를 favicon 및 앱 아이콘용 ICO 파일로 변환하고 여러 크기를 한 파일에 담을 수 있습니다.

SVG to PNG/JPG

SVG를 PNG 또는 JPG로 내보내고, 크기와 배경색을 조정한 뒤 로컬에서 다운로드할 수 있습니다.

SVG 최적화기

브라우저에서 SVG 코드를 최적화하고 불필요한 메타데이터를 제거한 뒤 더 가벼운 SVG를 출력합니다.

EXIF 뷰어

브라우저에서 이미지의 EXIF, GPS, 카메라 정보와 촬영 파라미터를 읽어옵니다.

이미지 메타데이터 정리

브라우저에서 JPEG, PNG, WebP 이미지의 EXIF, XMP, ICC 등 메타데이터를 제거합니다.

이미지 팔레트 추출기

이미지에서 대표 색상, 비율, 팔레트를 추출하고 HEX, CSS, JSON으로 로컬 내보내기 할 수 있습니다.

색상 선택기

브라우저에서 수동 입력, 화면, 업로드한 이미지에서 색상을 추출하고 HEX, RGB, HSL, HSV, CMYK, CSS 값을 확인합니다.

색상 변환기

브라우저에서 HEX, RGB, HSL, HSV, HWB, LAB, LCH, CMYK, CSS 키워드 사이의 색상을 양방향으로 변환하고 알파 채널도 함께 다룹니다.

색상 대비 검사기

브라우저에서 전경색과 배경색의 WCAG 대비 비율을 확인하고 일반/큰 글자의 AA / AAA 통과 여부를 판정합니다.

CSS 그라디언트 생성기

브라우저에서 linear-gradient, radial-gradient, conic-gradient 를 만들고 색상 스톱 편집, 실시간 미리보기, CSS 복사를 지원합니다.

HTML 색상 이름

브라우저에서 HTML / CSS 이름 색상을 검색하고 둘러본 뒤 이름, HEX, RGB 값을 복사할 수 있습니다.

favicon 생성기

한 장의 이미지로 favicon 자산, site.webmanifest, HTML 스니펫을 생성합니다.

Gemini 워터마크 제거

Gemini 가시 워터마크를 브라우저 안에서 로컬 제거하고 일괄 처리 및 다운로드를 지원합니다.

이미지 AVIF 변환기

PNG, JPG 등 이미지를 일괄 AVIF로 변환하고 품질, 배율, ZIP 다운로드를 지원합니다.

PNG 압축기

PNG 출력은 유지하면서 용량을 줄이고, 배율, 색상 수 축소, 미리보기, ZIP 다운로드를 지원합니다.

이미지 WebP 변환기

PNG, JPG 등 이미지를 품질과 배율을 조정하며 일괄 WebP로 변환하고, 미리보기와 ZIP 다운로드를 지원합니다.