CSS 페이지 말림 효과 생성기
카드 모서리가 종이처럼 접힌 CSS를 즉시 생성
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
카드나 문서 UI 모서리에 종이가 살짝 말려 올라간 듯한 입체 효과를 만들어주는 도구입니다. 4개 모서리 중 원하는 방향을 고르고 접힘 크기, 그림자 농도, 카드·뒷면 색상을 조절하면 결과가 실시간 미리보기로 바뀌며, 완성된 CSS 코드를 바로 복사해 프로젝트에 붙여넣을 수 있습니다. 모든 계산은 브라우저에서만 이뤄지고 서버로 전송되는 데이터는 없습니다.
사용 방법
- 4개 방향(우상단·좌상단·우하단·좌하단) 탭 중 원하는 모서리를 선택합니다.
- 슬라이더로 접힘 크기와 그림자 농도를 조절해 원하는 입체감을 맞춥니다.
- 카드 색상과 접힌 뒷면 색상을 컬러 피커나 텍스트 입력으로 지정합니다.
- 미리보기를 확인한 뒤 하단의 'CSS 복사' 버튼으로 완성된 코드를 복사해 사용합니다.
자주 묻는 질문
- 생성된 CSS를 그대로 사이트에 써도 되나요?
- 네, .curl-card 클래스와 ::before 가상 요소 스타일이 포함된 순수 CSS이므로 원하는 요소의 클래스명에 맞춰 그대로 붙여넣으면 됩니다.
- 접힘 방향을 여러 개 동시에 적용할 수 있나요?
- 도구는 한 번에 한 모서리씩 코드를 생성합니다. 여러 모서리를 원한다면 각 방향을 선택해 나온 CSS를 조합해 별도 클래스로 만들어 사용하세요.
- 이미지 없이 CSS만으로 종이 말림이 표현되나요?
- 네, 배경 그라데이션으로 모서리를 대각선으로 잘라내고 가상 요소에 그라데이션과 drop-shadow 필터를 겹쳐 이미지 없이 입체 효과를 만듭니다.