입력은 이 브라우저에서 처리됩니다.
사용 예제 코드
개발에 가져다 쓸 수 있는 기본 예제입니다. 표시된 환경에서 실행하세요.
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, 반복 배경
입력이 제한을 넘으면 데이터를 나누어 처리하세요. 파일 형식이나 알고리즘이 지원 범위에 없으면 다른 형식으로 임의 변환하지 말고 요구 사항에 맞는 도구를 선택하세요.