Trang chủ » HTML và CSS » CSS » Background gradient trong css

Background gradient trong css

Có 2 loại Background gradient trong css: (1) Quét màu xuất phát từ 1 phía, có thể theo chiều lên, xuống, trái, phải, đường chéo – (2) Quét màu xuất phát từ tâm. Hãy cùng mình tìm hiểu chi tiết về nó nhé!!!

Gradient Background

– Background gradient trong css cho phép tạo ra các phần tử có màu nền background bao gồm các hiệu ứng chuyển màu giữa hai hay nhiều màu sắc được chỉ định từ trước.

Có 2 loại Background gradient trong css:

  1. Linear Gradient: Quét màu xuất phát từ 1 phía (có thể theo chiều đi xuống/lên/trái/ phải/đường chéo).
  2. Radial Gradient: Quét màu xuất phát từ tâm.

CSS Linear Gradients

– Để tạo một Linear Gradients trong css, bạn phải xác định ít nhất hai điểm dừng màu. Điểm dừng màu là màu bạn muốn hiển thị chuyển tiếp. Bạn cũng có thể đặt điểm bắt đầu và hướng (hoặc góc) cùng với hiệu ứng chuyển màu.

Cú pháp

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Tham số

  • direction: Xác định điểm bắt đầu và hướng (hoặc góc) cùng với hiệu ứng chuyển màu.
  • color-stop1, color-stop2,…: Điểm dừng màu là màu bạn muốn hiển thị chuyển tiếp. Giá trị này bao gồm một giá trị màu, theo sau là vị trí dừng tùy chọn (tỷ lệ phần trăm từ 0% đến 100% hoặc chiều dài dọc theo trục gradient).

Linear Gradient – Đổ màu từ trên xuống dưới (đây là mặc định)

– Ví dụ sau đây cho thấy một Linear Gradient bắt đầu từ bên trên. Nó bắt đầu màu đỏ, chuyển sang màu vàng:

 
<!DOCTYPE html>
<html>
<head>
<style>
#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad2"></div>
</body>
</html>

Linear Gradient – từ trái sang phải

– Ví dụ sau đây cho thấy một linear gradient bắt đầu từ bên trái. Nó bắt đầu màu đỏ, chuyển sang màu vàng:

 
<!DOCTYPE html>
<html>
<head>
<style>
#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad3"></div>
</body>
</html>

Linear Gradient – Đường chéo

– Bạn có thể tạo một linear gradient theo đường chéo bằng cách chỉ định cả vị trí bắt đầu ngang và dọc. Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu từ trên cùng bên trái (và đi xuống dưới cùng bên phải). Nó bắt đầu màu đỏ, chuyển sang màu vàng:

 
<!DOCTYPE html>
<html>
<head>
<style>
#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad4"></div>
</body>
</html>

Sử dụng Angles linear-gradient trong css

– Nếu bạn muốn tùy chỉnh nhiều hơn về hướng của gradient, bạn có thể xác định một góc, thay vì các hướng được xác định trước (từ dưới lên, trên cùng, sang phải, sang trái, xuống dưới bên phải, v.v.).

Cú pháp

background-image: linear-gradient(angle, color-stop1, color-stop2);

– Góc được chỉ định là một góc giữa một đường ngang và đường dốc. Ví dụ sau đây cho thấy cách sử dụng các góc trên linear gradients:

 
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, red, yellow); /* Standard syntax (must be last) */
}
#grad2 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, red, yellow); /* Standard syntax (must be last) */
}
#grad3 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, red, yellow); /* Standard syntax (must be last) */
}
#grad4 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, red, yellow); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>Linear Gradients - Using Different Angles</h1>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Sử dụng nhiều điểm dừng màu

– Ví dụ sau đây cho thấy một linear gradient (từ trên xuống dưới) với nhiều điểm dừng màu:

 
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow, green); /* Standard syntax (must be last) */
}
#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}
#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>Linear Gradients - Multiple Color Stops</h1>
<h3>3 Color Stops (evenly spaced):</h3>
<div id="grad1"></div>
<h3>7 Color Stops (evenly spaced):</h3>
<div id="grad2"></div>
<h3>3 Color Stops (not evenly spaced):</h3>
<div id="grad3"></div>
<p><strong>Note:</strong> Color stops are automatically spaced evenly when no percents are specified.</p>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

– Ví dụ sau đây cho thấy cách tạo một linear gradient (từ trái sang phải) với màu sắc của cầu vồng và một số văn bản ngắn:

Gradient Background
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Gradient Background
</div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Sử dụng Transparency – Độ trong suốt linear-gradient trong css

– CSS gradients cũng hỗ trợ độ trong suốt, có thể được sử dụng để tạo hiệu ứng mờ dần. Để thêm độ trong suốt, bần cần sử dụng hàm rgba () để xác định các điểm dừng màu. Tham số cuối cùng trong hàm rgba () có thể là giá trị từ 0 đến 1 và nó xác định độ trong suốt của màu: 0 biểu thị độ trong suốt đầy đủ, 1 biểu thị màu đầy đủ (không trong suốt).

– Ví dụ sau đây cho thấy một linear gradient bắt đầu từ bên trái. Nó bắt đầu hoàn toàn trong suốt, chuyển sang màu đỏ đầy đủ:

 
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Lặp lại trong linear gradient CSS

– Hàm lặp lại repeating-linear-gradient() được sử dụng để lặp lại các điểm dừng màu:

 
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%); /* Standard syntax (must be last) */
}
#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%); /* Standard syntax (must be last) */
}
#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%); /* Standard syntax (must be last) */
}
#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h1>Repeating Linear Gradient</h1>
<div id="grad1"></div>
<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>
<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>
<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

CSS Radial Gradients

Ví dụ

– Một radial gradient từ tâm với các điểm dừng cách đều nhau:

 
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-image: radial-gradient(red, green, blue);
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Cách sử dụng và cú pháp

– Để tạo một radial gradient, bạn phải xác định ít nhất hai điểm dừng màu.

background-image: radial-gradient(shape size at position, start-color, ..., last-color);
  1. shape: Xác định hình dạng của radial gradient. Những giá trị khả thi:
    – ellipse(hình elip | mặc định)
    – circle(vòng tròn)
  2. size: Xác định kích thước của radial gradient. Những giá trị khả thi:
    – farthest-corner( góc xa nhất | mặc định)
    – closest-side (gần nhất)
    – closest-corner (góc gần nhất)
    – farthest-side (phía xa nhất)
  3. position: Xác định vị trí của radial gradient. Mặc định là “center”
  4. start-color, …, last-color: Điểm dừng màu là màu bạn muốn hiển thị chuyển tiếp. Giá trị này bao gồm một giá trị màu, theo sau là vị trí dừng tùy chọn (tỷ lệ phần trăm từ 0% đến 100% hoặc chiều dài dọc theo trục gradient).

Các ví dụ khác

Ví dụ 1:

– Một radial gradient xuyên tâm với các màu dừng có khoảng cách khác nhau:

 
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}
</style>
</head>
<body>
<h3>Radial Gradient - Differently Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Ví dụ 2:

Hình Ellipse

 

Hình tròn – Circle

 
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 200px;
  background-image: radial-gradient(red, yellow, green);
}
#grad2 {
  height: 150px;
  width: 200px;
  background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>
<h3>Radial Gradient - Shapes</h3>
<p><strong>Ellipse (this is default):</strong></p>
<div id="grad1"></div>
<p><strong>Circle:</strong></p>
<div id="grad2"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Ví dụ 3:

– Một radial gradient xuyên tâm với các kích thước khác nhau:

Gần nhất | closest-side

 

Phía xa nhất | farthest-side

 

Góc gần nhất | closest-corner

 

Góc xa nhất | farthest-corner (Mặc định)

 
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-image: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
}
#grad2 {
  height: 150px;
  width: 150px;
  background-image: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);
}
#grad3 {
  height: 150px;
  width: 150px;
  background-image: radial-gradient(closest-corner at 60% 55%,blue,green,yellow,black);
}
#grad4 {
  height: 150px;
  width: 150px;
  background-image: radial-gradient(farthest-corner at 60% 55%,blue,green,yellow,black);
}
</style>
</head>
<body>
<h3>Radial Gradients - Use of different size keywords</h3>
<p><strong>closest-side:</strong></p>
<div id="grad1"></div>
<p><strong>farthest-side:</strong></p>
<div id="grad2"></div>
<p><strong>closest-corner:</strong></p>
<div id="grad3"></div>
<p><strong>farthest-corner (this is default):</strong></p>
<div id="grad4"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>

Nếu bạn còn cảm thấy khó khăn thì có thể tạo code Background gradient css tùy chỉnh tại đây: https://cssgradient.io/

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *