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 background và background-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: text và conic-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!