CSS 카드 생성기

단계 1 / 2

배경

테두리

반지름(px)

패딩

그림자 흐림

그림자 불투명도

카드 제목

이것은 카드의 미리보기입니다.

카드는 제품 타일, 블로그 미리보기, 프로필, 대시보드 위젯 뒤에 있는 컨테이너입니다. 이 생성기는 그 컨테이너를 스타일링합니다. 배경색과 테두리 색, 모서리 반경, 안쪽 여백과 부드러운 그림자를 고르면 결과가 페이지에 바로 표시됩니다. 미리보기는 임시 콘텐츠를 보여 주므로 자신의 제목, 텍스트, 액션으로 바꾸세요. 결과물은 바로 쓸 수 있는 CSS 클래스 하나입니다.

카드 컨테이너 스타일링 방법

1

색상 고르기

카드의 배경색과 테두리 색을 정합니다.
2

모양 정하기

레이아웃에 맞는 모서리 반경과 안쪽 여백을 고릅니다.
3

그림자 추가

카드 아래 부드러운 그림자의 흐림과 불투명도를 조절합니다.
4

미리 보고 복사

라이브 미리보기를 확인하고 생성된 .card CSS를 스타일시트에 복사합니다.

생성되는 CSS의 내용

도구는 .card라는 단일 클래스를 만듭니다:

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

background는 선택한 배경색
border는 선택한 색의 1px 실선
border-radius와 padding은 선택한 px 값
box-shadow는 선택한 흐림과 불투명도 값을 쓰고 아래쪽으로 4px 고정 오프셋을 사용

미리보기는 임시 콘텐츠

미리보기는 비율을 가늠할 수 있도록 제목과 문단을 보여 줍니다. 도구 자체는 HTML을 출력하지 않습니다. 클래스를 자신의 컨테이너에 적용하고 그 안에 제목, 텍스트, 이미지 또는 액션 버튼을 넣으세요. 카드가 색이 있는 페이지 배경 위에 놓일 예정이라면 미리보기에서만이 아니라 그 자리에서 테두리 대비를 확인하세요.

합리적인 한계

0 미만의 값은 0으로 고정되고 그림자 불투명도는 0과 1 사이를 유지합니다. 여백이나 흐림 값이 지나치게 크면 예상 밖의 결과가 나올 수 있으니 실제 레이아웃에서 쓸 범위로 컨트롤을 유지하세요.

자신의 마크업과 조합

페이지의 최소 예:

<div class="card">
  <h3>제품 이름</h3>
  <p>간단한 설명</p>
</div>

컨테이너 스타일은 안의 내용을 제한하지 않습니다. 배경, 테두리, 간격, 그림자만 처리합니다.

자주 묻는 질문

아니요. .card CSS 클래스만 출력합니다. 제목, 텍스트, 액션을 감싸는 div나 article 같은 마크업은 직접 만드세요.

생성되는 테두리는 항상 선택한 색의 1px 실선입니다. 다른 두께나 스타일이 필요하면 CSS의 border 줄을 수정하세요.

고정 4px 세로 오프셋이 그림자를 은은하고 읽기 쉽게 유지합니다. 부드러움(흐림)과 강도(불투명도)는 사용자가 조절합니다.

아니요. 미리보기 텍스트는 표시용일 뿐입니다. 복사한 CSS에는 콘텐츠가 없고 컨테이너 스타일만 담겨 있습니다.

CSS 카드 생성기

카드 제목

카드 컨테이너 스타일링 방법

색상 고르기

모양 정하기

그림자 추가

미리 보고 복사

생성되는 CSS의 내용

미리보기는 임시 콘텐츠

합리적인 한계

자신의 마크업과 조합

자주 묻는 질문

관련 도구

ASCII 표 참조

키보드 단축키 참고표

HTML 문자 참조

보색 찾기

랜덤 영어 글자 생성기

랜덤 색상 팔레트 생성기