Hướng dẫn tạo hiệu ứng văn bản sử dụng Gradient Text CSS

172

Bài viết được sự cho phép của tác giả Nguyễn Thành Nam

Hiệu ứng văn bản với gradient text là một cách tuyệt vời để tạo điểm nhấn cho văn bản trên trang web của bạn. Sử dụng CSS, bạn có thể dễ dàng áp dụng hiệu ứng gradient text để làm cho văn bản trở nên hấp dẫn và nổi bật. Dưới đây là một ví dụ sử dụng hiệu ứng gradient text được tạo bằng CSS.

Để làm được như trên, bạn làm theo các bước hướng dẫn dưới đây:

Bước 1: Tạo HTML cơ bản

Đầu tiên, chúng ta cần tạo 1 khối HTML để chứa văn bản.

<div>
  <p>thanhnamnguyen.dev</p>
</div>

Bước 2: Thêm CSS Gradient

Sử dụng CSS sau để tạo hiệu ứng chuyển màu trên văn bản (gradient text). Mình sử dụng thuộc tính background: linear-gradient để tạo dải màu sắc tương ứng. Gradient này chạy từ trái qua phải và bao gồm bốn màu: #7953cd, #00affa, #0190cd, và #764ada (các mã màu này đang áp dụng ở chế độ darkmode). Các con số (20%, 30%, 70%, 80%) xác định vị trí của màu trong gradient.

  • -webkit-background-clip và background-clip: Định nghĩa việc clip gradient vào văn bản.
  • -webkit-text-fill-color và text-fill-color: Đặt màu chữ trong suốt để hiển thị gradient.
  • background-size: Đặt kích thước của background gradient là 500% theo chiều ngang và tự động theo chiều dọc.
  • Sử dụng animation textShine với thời gian 5 giây, kiểu easing-in-out, lặp vô hạn và thay đổi đối diện.
p {
  background: linear-gradient(to right, #7953cd 20%, #00affa 30%, #0190cd 70%, #764ada 80%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  background-size: 500% auto;
  animation: textShine 5s ease-in-out infinite alternate;
}

Cùng với CSS ở trên, chúng ta cũng cần thêm hiệu ứng bằng cách sử dụng @keyframes textShine { ... }: Định nghĩa animation textShine. Nó bắt đầu với một vị trí background ở 0% theo chiều ngang và 50% theo chiều dọc, và kết thúc ở vị trí 100% theo chiều ngang và 50% theo chiều dọc, tạo hiệu ứng di chuyển gradient từ trái sang phải.

@keyframes textShine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

  3 Cách Làm Border Gradient Trong CSS Mà Bạn Nên Biết

  7 thư viện CSS Animation cực hay cho lập trình viên Frontend

Bước 3. Kết quả

Và bây giờ, bạn đã tạo thành công hiệu ứng gradient text trên văn bản. Thử nghiệm và tùy chỉnh gradient màu sắc và góc theo ý muốn.

Việc này chỉ là một ví dụ đơn giản, và bạn có thể tùy chỉnh nó theo nhu cầu của bạn để tạo ra hiệu ứng gradient text độc đáo cho trang web của bạn.

Đó là cách bạn có thể tạo hiệu ứng văn bản với gradient text sử dụng CSS. Hãy thử và sáng tạo để làm cho trang web của bạn trở nên thú vị hơn!

Bài viết gốc được đăng tải tại blog.thanhnamnguyen.dev

Xem thêm:

Xem thêm Việc làm IT hấp dẫn tại TopDev

RELATED ARTICLESMORE FROM AUTHOR