개발에 필요한, 작은 도구들.

CSS 생성기

그림자·그라데이션·배경을 조절하고 코드를 가져가세요.

사용 가이드

입력은 이 브라우저에서 처리됩니다.

입력 · 옵션

표준 CSS box-shadow, linear-gradient, 반복 배경

사용 예제 코드 보기 ↓

결과

입력 후 실행하면 결과가 표시됩니다.

사용 예제 코드

개발에 가져다 쓸 수 있는 기본 예제입니다. 표시된 환경에서 실행하세요.

CSS stylesheet

현재 입력 반영은 코드에 사용된 항목에만 적용됩니다. 파일 입력은 예제에 포함하지 않습니다.

.preview {
  background: linear-gradient(135deg, #b6ebbd, #28523e);
  box-shadow: 0 12px 24px rgb(0 0 0 / 20%);
  border-radius: 24px 8px 24px 8px;
}

.radial {
  background: radial-gradient(circle, #b6ebbd, #28523e);
}

이렇게 사용하세요

그림자 흐림 32px, Y축 12px로 부드러운 패널 그림자를 만듭니다.

알아두면 좋은 점

형식과 의미

그라데이션 각도 0deg는 아래에서 위 방향입니다. 90deg는 왼쪽에서 오른쪽입니다.

올바른 사용

CSS를 실제 배경과 함께 확인하세요. 그림자와 색은 주변 대비에 따라 다르게 보입니다.

지원 범위와 제한

표준 CSS box-shadow, linear-gradient, 반복 배경

입력이 제한을 넘으면 데이터를 나누어 처리하세요. 파일 형식이나 알고리즘이 지원 범위에 없으면 다른 형식으로 임의 변환하지 말고 요구 사항에 맞는 도구를 선택하세요.