728x90
반응형
# TailwindCSS에서 글자 배경에 Gradient를 적용하는 방법
- text-transparent로 투명하게 만든 텍스트를 gradient가 적용된 배경으로 마스킹하는 간단한 구조입니다.
<h1 className="text-transparent bg-clip-text bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500">
TAB DISPLAY
</h1>- 적용 결과입니다
- 어떤 조합으로 Gradient를 정해야 할 지 모르겠거나 직접 TailwindCSS 문법으로 Gradient를 작성하기 번거로울 경우, 아래의 사이트를 이용하시면, 바로 원하는 Gradient의 TailwindCSS 코드를 복사해서 적용할 수 있으니, 이용해 보시면 좋을 것 같습니다.
Gradients for Tailwind CSS | Hypercolor
A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Easily copy and paste the class names, CSS or even save the gradients as an image.
hypercolor.dev
728x90
반응형
'개발 > 유용한 툴' 카테고리의 다른 글
| [UI][SVG][유용한 툴][한 줄 팁] 나만의 SVG 디자인 요소 추가 방법 (0) | 2023.07.01 |
|---|---|
| [유용한 툴][Web] Opera Browser로 무료 VPN 사용하는 방법 (0) | 2023.06.11 |
| [라이브러리][Tailwindcss] daisyUI로 Tailwindcss 효율적으로 사용하기 (0) | 2023.04.19 |
| [인터넷][한 줄 팁] 인터넷 속도 확인 방법 (0) | 2023.04.15 |
| [유용한 툴] Slack Incoming Webhook 사용 방법 (0) | 2023.03.28 |