CSS 생성기

그림자, clip-path, 베지어 이징, 글래스모피즘을 실시간으로 만듭니다

상자 색상

배경

모서리 둥글기16px

CSS

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);

Tailwind (임의 값)

shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]

CSS 생성기 사용 방법

박스 그림자, 클립 패스, 큐빅 베지어, 글래스모피즘, 블롭 모서리, 텍스트 그림자를 미리보기와 함께 만들고 CSS와 Tailwind 임의 값 클래스로 출력합니다.

생성기를 '박스 그림자', '클립 패스', '큐빅 베지어', '글래스모피즘', '블롭 모서리', '텍스트 그림자' 중에서 고릅니다.

프리셋에서 시작하거나 슬라이더와 색상을 조정합니다.

클립 패스의 점, 베지어의 두 핸들, 블롭의 핸들은 미리보기에서 직접 드래그할 수 있습니다.

아래에 나오는 CSS나 Tailwind 클래스를 복사합니다.

자주 묻는 질문

네. '박스 그림자'에서 '레이어 추가'를 누르면 레이어마다 오프셋, 흐림, 퍼짐, 색상, 불투명도, 안쪽 그림자를 따로 정할 수 있습니다.

도형 가장자리를 더블클릭하면 점이 추가되고, 점을 선택한 뒤 Delete를 누르면 삭제됩니다. '원', '타원', '인셋'은 슬라이더로 조정합니다.

backdrop-filter는 요소 뒤에 있는 것을 흐리게 하므로 색이나 무늬가 있는 배경이 필요합니다. 출력에는 Safari용 -webkit- 접두사도 들어 있습니다.

Y 값이 1보다 크거나 0보다 작으면 움직임이 목표를 지나쳐 튕기거나 반동하는 효과가 납니다. '재생'을 눌러 선형 움직임과 비교할 수 있습니다.

필요 없습니다. rounded-[…]나 [clip-path:…] 같은 Tailwind 기본 임의 값 문법을 사용합니다.