Tô màu nền đậm nhạt Gradient trong CSS

Bài viết này sẽ hướng dẫn các bạn tô màu đậm nhạt bằng CSS Gradient, giúp trang web có hiệu ứng lạ mắt và thẩm mỹ hơn. Trong CSS, có 3 kiểu tô màu nên đậm nhạt sử dụng gradient (độ dốc) đó là:

Linear Gradient: gradient tuyến tính, màu nền được tô từ trái, phải, trên, dưới, đường chéo sang một bên còn lại.
Radial Gradient: gradient xuyên tâm, tô màu từ tâm một hình đó ra ngoài.
Conic Gradient: gradient hình nón, tô màu xoay quanh một điểm giữa.

Linear Gradient

Linear Gradient (kéo theo đường thẳng) là một loại gradient (sự chuyển đổi màu từ một màu sang màu khác) trong CSS, cho phép bạn tạo ra một hiệu ứng màu nền trải dọc theo một đường thẳng. Nó tạo ra một hiệu ứng màu sắc từ một màu ở một điểm bắt đầu đến một màu khác ở điểm kết thúc trên một đường thẳng ảo nào đó. Linear Gradient trong CSS được sử dụng rộng rãi để tạo nền cho các phần tử trang web, như tiêu đề, nút, hoặc phần nền của trang. Bạn có thể chỉ định màu sắc, hướng, và điểm dừng màu để tạo các hiệu ứng màu sắc đa dạng và tùy chỉnh cho các yếu tố trên trang web của bạn.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 800px;
  background-color: yellow; /* Dành cho trình duyệt không hỗ trợ Gradient */
  background-image: linear-gradient(yellow, red);
}
#grad2 {
  height: 200px;
  width: 800px;
  background-color: yellow; /* Dành cho trình duyệt không hỗ trợ Gradient */
  background-image: linear-gradient(to right, yellow, red);
}
#grad3 {
  height: 200px;
  width: 800px;
  background-color: yellow; /* Dành cho trình duyệt không hỗ trợ Gradient */
  background-image: linear-gradient(to left, yellow, red);
}
#grad4 {
  height: 200px;
  width: 800px;
  background-color: yellow; /* Dành cho trình duyệt không hỗ trợ Gradient */
  background-image: linear-gradient(to top, yellow, red);
}
</style>
</head>
<body>

<h1>DAMMIO.COM</h1>

<h2>Linear Gradient - từ Đầu (Top) đến Cuối (Bottom) trang</h2>
<div id="grad1"></div>

<h2>Linear Gradient - từ Trái sang Phải</h2>
<div id="grad2"></div>

<h2>Linear Gradient - từ Phải sang Trái</h2>
<div id="grad3"></div>

<h2>Linear Gradient - từ Cuối lên Đầu</h2>
<div id="grad4"></div>

</body>
</html>

Tô màu theo đường chéo

Tương tự như trên, bạn có thể tô theo đường chéo, chỉ cần định nghĩa thêm thông, ví dụ sang trái lên top thì dùng to left top như sau:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 400px;
  width: 400px;
  background-color: yellow; /* Dành cho trình duyệt không hỗ trợ Gradient */
  background-image: linear-gradient(to left top, yellow, red);
}
</style>
</head>
<body>

<h1>DAMMIO.COM</h1>

<h2>Linear Gradient - từ Trái hướng lên Đầu (Top)</h2>
<div id="grad1"></div>

</body>
</html>

Các trường hợp khác bạn có thể thử như to left bottom, to right bottom, và to right top.

Liên quan: Tô màu nền từ đậm đến nhạt (gradient fill) cho các đối tượng trong Word

Tô màu theo độ góc

Nếu bạn muốn tô theo đường chéo thì bạn có thể mô tả thêm độ góc khi tô màu, ví dụ 45deg (45 degree):

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 800px;
  background-color: yellow; /* Dành cho trình duyệt không hỗ trợ Gradient */
  background-image: linear-gradient(45deg, yellow, red);
}

</style>
</head>
<body>

<h1>DAMMIO.COM</h1>

<h2>Linear Gradient - từ theo góc 45 độ</h2>

<div id="grad1"></div>
</body>
</html>

Tô theo nhiều màu dừng

Một điểm thú vị nữa là bạn có thể tự do định nghĩa số màu khi tô để tạo ra nhiều hiệu ứng đa màu sắc. Bạn có thể dùng cách này để làm cầu vòng 7 sắc nếu muốn.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 800px;
  background-color: yellow; /* Dành cho trình duyệt không hỗ trợ Gradient */
  background-image: linear-gradient(to right, yellow, red, white, blue);
}

</style>
</head>
<body>

<h1>DAMMIO.COM</h1>

<h2>Linear Gradient - tô nhiều màu gồm yellow, red, white, blue</h2>
<div id="grad1"></div>

</body>
</html

Sử dụng màu trong suốt (transparent)

Bạn cần sử dụng màu transparent để làm màu nền thanh nhã hơn và rất nhiều website sử dụng cách này trong việc thiết kế giáo diện. Để làm như vậy, bạn chỉ cần định nghĩa màu bằng hàm rgba() với RGB tương ứng màu đỏ, màu xanh dương, màu xanh lục với chỉ số từ 0-255 và A là độ trong suốt từ 0 đến 1.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,255,0,1), rgba(255,255,0,0));
}

</style>
</head>
<body>

<h1>DAMMIO.COM</h1>

<h2>Linear Gradient - tô nhiều màu trong suốt từ vàng đến vàng nhạt sang trắng</h2>
<div id="grad1"></div>

</body>
</html>

Lặp lại màu nền

Bạn có thể dùng thuộc tính repeating-linear-gradient để lặp lại màu nền, ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 800px;
  background-image: repeating-linear-gradient(to right, rgba(255,255,0,1) 10%, rgba(255,255,0,0) 20%);
}

</style>
</head>
<body>

<h1>DAMMIO.COM</h1>

<h2>Linear Gradient - tô nhiều màu trong suốt từ vàng đến vàng nhạt sang trắng và lặp lại</h2>
<div id="grad1"></div>

</body>
</html>

Radial Gradient & Conic Gradient

Hai kiểu Gradient này có cách tô màu và thuộc tính giống như Linear Gradient chỉ khác là cách tô màu, một số ví dụ:

<!DOCTYPE html>
<html>
<head>
    <style>
		.radial-gradient {
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, #3498db, #e74c3c);
            border-radius: 50%;
        }
        .conic-gradient {
            width: 300px;
            height: 300px;
            background: conic-gradient(
                from 0deg,
                #3498db,
                #e74c3c,
                #27ae60,
                #f1c40f
            );
            border-radius: 50%;
        }
		
    </style>
</head>
<body>
	<h1>DAMMIO.COM</h1>
	<h2>Ví dụ về radial-gradient và conic-gradient</h2>
    <div class="radial-gradient"></div>
	</br>
	<div class="conic-gradient"></div>
</body>
</html>

Như vậy, bài viết đã trình bày cho bạn về cách sử dụng Gradient trong CSS thông qua các ví dụ trực quan. Chúc bạn thành công!

Trích dẫn bài viết

APA:
Dammio. (2023). Tô màu nền đậm nhạt Gradient trong CSS. https://www.dammio.com/2023/10/02/to-mau-nen-dam-nhat-gradient-trong-css.
BibTeX:
@misc{dammio, author = {Dammio}, title = {Tô màu nền đậm nhạt Gradient trong CSS}, year = {2023}, url = {https://www.dammio.com/2023/10/02/to-mau-nen-dam-nhat-gradient-trong-css}, urldate = {2024-09-05} }

Kết nối