CSS 스타일 생성기
그라디언트·박스섀도·cubic-bezier를 시각 편집해 CSS 복사
입력값은 브라우저에서만 처리되며 서버로 전송·저장되지 않습니다.
CSS 스타일 생성기란?
CSS 스타일 생성기는 그라디언트, box-shadow, cubic-bezier 이징 함수를 슬라이더로 조절하며 실시간 미리보기와 함께 CSS 코드를 즉시 만들어주는 도구입니다. 코드를 직접 계산·타이핑하지 않고 원하는 결과를 눈으로 확인하며 값을 조절할 수 있습니다.
각 탭 사용법
- 그라디언트: 유형(선형/원형)과 각도, 색상 정지점을 조절해 background 그라디언트 코드를 생성합니다.
- 박스 그림자: 오프셋·번짐·확산·색상·투명도·inset 여부로 box-shadow 코드를 생성합니다.
- 이징 함수: 4개의 제어점 값 또는 프리셋으로 cubic-bezier 곡선을 만들고, 재생 버튼으로 실제 움직임을 미리 볼 수 있습니다.
개인정보·처리 방식
모든 미리보기와 코드 생성은 사용자의 브라우저 안에서만 이루어집니다. 입력한 값은 서버로 전송되거나 저장되지 않습니다.
자주 묻는 질문
CSS 그라디언트 색상 정지점(color stop)이란 무엇인가요?
색상 정지점은 그라디언트가 특정 색으로 도달하는 위치(%)를 지정하는 값입니다. 두 개 이상의 정지점을 추가하면 여러 색이 순서대로 자연스럽게 섞이는 그라디언트를 만들 수 있습니다.
box-shadow의 offset·blur·spread 차이는 무엇인가요?
x/y offset은 그림자가 원본에서 얼마나 이동해 보이는지, blur는 그림자 경계의 흐림 정도, spread는 그림자 자체의 크기(확장·축소)를 결정합니다. inset을 켜면 그림자가 요소 안쪽으로 그려집니다.
cubic-bezier 이징 함수는 어떻게 동작하나요?
cubic-bezier(x1, y1, x2, y2)는 애니메이션·트랜지션의 속도 변화 곡선을 정의합니다. 두 개의 제어점(x1,y1), (x2,y2)으로 시작·끝 구간의 가속·감속 정도를 조절하며, ease·linear 등 표준 프리셋도 이 함수의 특수한 값입니다.
생성된 CSS 코드는 그대로 붙여 넣어도 되나요?
네. 각 탭에서 생성되는 코드는 표준 CSS 문법이므로 background, box-shadow, transition-timing-function 속성 값으로 그대로 붙여 넣어 사용할 수 있습니다.
입력한 값이 서버로 전송되나요?
아니요. 모든 미리보기와 코드 생성은 브라우저 안에서만 이루어지며, 입력값은 서버로 전송되거나 저장되지 않습니다.
광고