다플 로고다플 도구모음
🌈
개발자 도구

CSS 그라디언트 생성기

멀티 컬러 스탑, 각도, 타입을 자유롭게 조절해 나만의 그라디언트를 만드세요.

linear-gradient · 135°

타입

방향 / 각도

°

컬러 스탑

0%
100%

CSS 코드

background
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
background-image
background-image: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
Tailwind CSS
bg-gradient-to-br from-[#6366f1] to-[#ec4899]

프리셋

공유하기

CSS 그라디언트 생성기 이용 안내

Gradient 생성기란?

멀티 컬러 스탑, 각도, 타입을 자유롭게 조절해 그라디언트를 만드세요. CSS와 Tailwind 코드를 바로 복사할 수 있어요.

선형·방사형 그라디언트의 각도와 여러 색상 정지점 위치를 조절해 CSS 및 Tailwind에서 사용할 배경 코드를 만듭니다.

Gradient 생성기 사용 방법

  1. 1

    입력 준비

    선형 또는 방사형 그라디언트를 선택하고 시작 색상 정지점을 준비하세요.

  2. 2

    옵션 설정

    각도, 중심과 여러 색상 정지점의 색·위치를 원하는 전환에 맞추세요.

  3. 3

    결과 확인

    완성된 배경을 확인하고 CSS 또는 프로젝트에 맞는 Tailwind 코드를 복사하세요.

기능과 사용 전 확인사항

처리 범위

두 색만 섞는 기본 배경뿐 아니라 중간 색을 추가한 다중 색상 전환을 실시간으로 보며 각 정지점의 비율을 세밀하게 맞출 수 있습니다.

사용 전 확인

생성된 Tailwind 표현은 프로젝트 설정과 버전에 따라 조정이 필요할 수 있습니다. 대상 브라우저에서 색상과 전환 경계를 확인하세요.

자주 묻는 질문

그라디언트에 색상을 여러 개 추가할 수 있나요?

색상 정지점을 추가하고 각 색의 위치를 조절해 두 가지 이상의 색상을 자연스럽게 연결할 수 있습니다. 정지점 위치가 가까우면 색 경계가 선명해지고 멀면 완만해지므로 퍼센트 위치를 함께 조절하세요.

그라디언트 방향과 각도를 바꿀 수 있나요?

선택한 그라디언트 유형에 맞춰 각도나 중심 위치를 조절하고 결과를 실시간으로 확인할 수 있습니다. 선형 각도와 방사형 중심은 서로 다른 속성을 사용하므로 유형을 바꾸면 이전 설정의 표현 방식도 달라질 수 있습니다.

생성 결과를 Tailwind에서도 사용할 수 있나요?

화면에서 제공하는 CSS와 Tailwind 형식의 결과를 확인하고 프로젝트에 맞는 코드를 복사할 수 있습니다. 임의 값 문법의 허용 여부와 색상 설정은 Tailwind 버전·빌드 설정에 따라 다르므로 컴파일 결과를 확인하세요.

관련 글

Gradient 생성기 사용법과 활용 방법

선형 또는 방사형 그라디언트를 선택하고 시작 색상 정지점을 준비하세요. 각도, 중심과 여러 색상 정지점의 색·위치를 원하는 전환에 맞추세요. 완성된 배경을 확인하고 CSS 또는 프로젝트에 맞는 Tailwind 코드를 복사하세요.

Cron 표현식 생성기 사용법과 활용 방법

작업을 실행할 분, 시, 일, 월과 요일 조건을 선택하세요. 매번·특정 시각·간격 실행 조건을 조합하고 대상 시스템의 시간대를 확인하세요. 생성된 5필드 Cron 표현식과 한국어 실행 주기 설명이 의도와 같은지 비교하세요.

JWT 디코더 사용법과 활용 방법

분석할 JWT 문자열 전체를 입력란에 붙여 넣으세요. Header·Payload 탭과 exp·iat·nbf 시간 표시 방식을 선택해 값을 살펴보세요. 알고리즘과 클레임, 발급·만료 시간을 확인하되 별도의 서명 검증이 필요함을 기억하세요.