언제 유용한가요?
랜딩 페이지나 카드에 눈에 띄는 효과를 넣고 싶지만 CSS를 처음부터 작성하기는 부담스러울 때, 마음에 드는 효과를 찾아 바로 복사해 쓸 수 있어 유용합니다.
CSS ART Archive
Copyable CSS art effect snippets for glowing borders, wavy backgrounds, frosted glass, and more.
사용 가이드
CSS ART 아카이브 사용 가이드
CSS ART 아카이브는 빛나는 테두리, 일렁이는 배경, 3D 효과 등 실시간 미리보기가 있는 CSS 효과 코드 조각을 모아둔 갤러리입니다.
사용 방법
- 텍스트, 배경, 3D, 카드, 인터랙션 같은 필터로 원하는 분위기의 효과를 좁혀봅니다.
- 카드에 마우스를 올리거나 살펴보며 실시간 미리보기로 움직임과 호버 반응을 확인합니다.
- 마음에 드는 효과의 복사 아이콘을 눌러 CSS 코드를 클립보드에 복사합니다.
알아두면 좋은 점
복사되는 코드는 효과 자체에 집중한 스니펫이므로, 실제 프로젝트에 붙여넣을 때는 배경색이나 크기처럼 데모용으로만 넣어둔 값을 프로젝트에 맞게 조정해야 할 수 있습니다.
데이터 처리 안내
모든 미리보기와 복사는 브라우저 안에서 처리되며, 어떤 효과를 봤는지는 서버에 기록되지 않습니다.
자주 묻는 질문
필터를 여러 개 동시에 선택할 수 있나요?
아니요, 한 번에 하나의 필터만 적용되며 선택한 필터에 해당하는 효과만 걸러 보여줍니다. 전체 목록으로 돌아가려면 "전체" 필터를 다시 누르면 됩니다.
복사한 CSS를 그대로 붙여넣으면 바로 작동하나요?
대부분의 효과는 클래스 이름과 함께 그대로 붙여넣으면 작동하지만, 애니메이션이 있는 효과는 @keyframes 부분까지 함께 복사되었는지 확인하고, 데모용 배경색이나 크기는 필요에 따라 조정하는 것이 좋습니다.