Tiêu đề bài viết phối trộn nhiều màu sắc với CSS3

Bạn đang muốn làm nổi bật tiêu đề bài viết để thu hút ánh nhìn? Với CSS3, bạn hoàn toàn có thể tạo một tiêu đề với hiệu ứng màu chuyển sắc đầy ấn tượng chỉ bằng vài dòng CSS.

Tiêu đề bài viết phối trộn nhiều màu sắc với CSS3

Demo tiêu đề nhiều màu

Bạn có thể xem demo ngay tại tiêu đề của bài viết này. Đơn giản chỉ là sự kết hợp giữa backgroundbackground-clip.

.colorful-title {
    background: conic-gradient(Blue 0 33%, Lime 0 55%, Violet 0 70%, OrangeRed 0 87%, Gold 0 100%);
    background-clip: text;
    background-size: 50%;
    color: transparent;
    text-align: center;
    font-size: 55px;
    letter-spacing: -.025em;
    line-height: 1;
    font-weight: 900;
}

Gợi ý sử dụng

Bạn có thể áp dụng lớp .colorful-title cho:

  • Tiêu đề bài viết (<h1>, <h2>)
  • Các đoạn slogan hoặc giới thiệu nổi bật
  • Banner / hero section của landing page

Ví dụ HTML:

<h1 class="colorful-title">Chào mừng đến với blog của mình!</h1>

Kết luận

Hiệu ứng phối màu bằng background-clip: textconic-gradient là một cách đơn giản mà cực kỳ hiệu quả để tăng tính thẩm mỹ cho website. Không cần ảnh, không cần thư viện nặng, chỉ với CSS thuần!

Chúc các bạn thành công!

Bình Luận


1 bình luận