CSS 그라디언트 생성기

브라우저에서 linear-gradient, radial-gradient, conic-gradient 를 만들고 색상 스톱 편집, 실시간 미리보기, CSS 복사를 지원합니다.

CSS 그라디언트 생성기

CSS 그라디언트 생성기는 브라우저에서 linear-gradient, radial-gradient, conic-gradient 를 로컬로 만들고 여러 색상 스톱 편집, 각도와 위치 조정, 실시간 미리보기, CSS 복사를 제공합니다.

사용 방법

  1. 선형, 방사형, 원뿔형 중 하나를 선택합니다.
  2. 각도, 모양, 시작 위치와 색상 스톱을 조정합니다.
  3. 실시간 미리보기에서 결과를 확인합니다.
  4. 생성된 CSS 를 스타일 코드나 디자인 전달 문서에 복사합니다.

기능

  • 가장 많이 쓰이는 세 가지 CSS 그라디언트 지원
  • 여러 색상 스톱 편집과 실시간 미리보기
  • 디자인 데이터를 업로드하지 않고 로컬에서 CSS 생성

왜 사용할까요?

  • 버튼, 카드, 배너, 히어로 배경용 그라디언트를 빠르게 제작
  • 그라디언트 문법을 직접 쓰며 반복 실험하는 시간을 줄임
  • 디자인과 프런트엔드 협업에 바로 쓸 수 있는 CSS 제공

관련 색상 도구

GIF 메이커

정적인 이미지나 비디오 클립을 동적 GIF로 변환합니다.

이미지 크기 조정

이미지 크기를 일괄 조정하고 픽셀 또는 비율 기준, 비율 고정, 로컬 내보내기를 지원합니다.

이미지 ICO 변환기

이미지를 favicon 및 앱 아이콘용 ICO 파일로 변환하고 여러 크기를 한 파일에 담을 수 있습니다.

SVG to PNG/JPG

SVG를 PNG 또는 JPG로 내보내고, 크기와 배경색을 조정한 뒤 로컬에서 다운로드할 수 있습니다.

SVG 최적화기

브라우저에서 SVG 코드를 최적화하고 불필요한 메타데이터를 제거한 뒤 더 가벼운 SVG를 출력합니다.

EXIF 뷰어

브라우저에서 이미지의 EXIF, GPS, 카메라 정보와 촬영 파라미터를 읽어옵니다.

이미지 메타데이터 정리

브라우저에서 JPEG, PNG, WebP 이미지의 EXIF, XMP, ICC 등 메타데이터를 제거합니다.

이미지 팔레트 추출기

이미지에서 대표 색상, 비율, 팔레트를 추출하고 HEX, CSS, JSON으로 로컬 내보내기 할 수 있습니다.

색상 선택기

브라우저에서 수동 입력, 화면, 업로드한 이미지에서 색상을 추출하고 HEX, RGB, HSL, HSV, CMYK, CSS 값을 확인합니다.

색상 변환기

브라우저에서 HEX, RGB, HSL, HSV, HWB, LAB, LCH, CMYK, CSS 키워드 사이의 색상을 양방향으로 변환하고 알파 채널도 함께 다룹니다.

색상 대비 검사기

브라우저에서 전경색과 배경색의 WCAG 대비 비율을 확인하고 일반/큰 글자의 AA / AAA 통과 여부를 판정합니다.

CSS 박스 섀도 생성기

브라우저에서 box-shadow 오프셋, 블러, 스프레드, 투명도, 모서리 반경, inset 을 조절하고 실시간 미리보기와 CSS 복사를 지원합니다.

HTML 색상 이름

브라우저에서 HTML / CSS 이름 색상을 검색하고 둘러본 뒤 이름, HEX, RGB 값을 복사할 수 있습니다.

favicon 생성기

한 장의 이미지로 favicon 자산, site.webmanifest, HTML 스니펫을 생성합니다.

Gemini 워터마크 제거

Gemini 가시 워터마크를 브라우저 안에서 로컬 제거하고 일괄 처리 및 다운로드를 지원합니다.

이미지 AVIF 변환기

PNG, JPG 등 이미지를 일괄 AVIF로 변환하고 품질, 배율, ZIP 다운로드를 지원합니다.

PNG 압축기

PNG 출력은 유지하면서 용량을 줄이고, 배율, 색상 수 축소, 미리보기, ZIP 다운로드를 지원합니다.

이미지 WebP 변환기

PNG, JPG 등 이미지를 품질과 배율을 조정하며 일괄 WebP로 변환하고, 미리보기와 ZIP 다운로드를 지원합니다.