CSS Gradient⭐

Summary

• Có 3 cách chính để tạo ra gradient: linear-gradient, radial-gradient, conic-gradient
• Để lặp lại các gradient, ta có thể sử dụng repeating-linear-gradient, ... functions.

Gradient

linear-gradient

• Tạo ra 1 bức ảnh với 2 hoặc nhiều màu, chuyển màu tuyến tính.
  • Đơn giản nhất: background: linear-gradient(black, white);
  • Add thêm chiều thay đổi màu, bđ với từ to: `background: linear-gradient(to right, black, white);
  • Chọn điểm khởi đầu: background: linear-gradient(45deg, darkred 30%, crimson);
  • Put more color on background: background: linear-gradient(45deg, darkred 20%, crimson, darkorange 60%, gold, bisque); `

radial-gradient

Notes

background: radial-gradient(shape size at position, color-stops);

• Giống với linear-gradient nhưng giờ sẽ là hình tròn =))
• shape: Mặc định là ellipse, có thể chọn là circle
• Size: Kích thước của gradient.
  • Size keywords:
    • closest-side - Gradient kéo dài từ vị trí bắt đầu đến cạnh gần nhất của container. đảm bảo gradient chạm vào cạnh gần nhất trước.
    • farthest-side - Gradient kéo dài từ vị trí bắt đầu đến cạnh xa nhất của box.
    • closest-corner - Gradient kéo dài tới góc gần nhất của box.
    • farthest-corner - Gradient kéo dài đến góc xa nhất của box.
  • Giá trị size:
    • eg: background: radial-gradient(circle 100px 200px, red, blue);
• Position: Vị trí bắt đầu của gradient (center, left top, ...)
• color-stops: Các điểm dừng màu của gradient red, blue, ...

Example:

/* Gradient kéo dài đến góc xa nhất */
background: radial-gradient(circle farthest-corner, red, blue);
 
/* Gradient kích thước tùy chỉnh 300px, vị trí bắt đầu ở 20% 30% */
background: radial-gradient(circle 300px at 20% 30%, red, blue);
 
/* Gradient kích thước tùy chỉnh hình ellipse */
background: radial-gradient(ellipse 100px 200px, red, yellow, green);

Conic-gradient

Notes

background: conic-gradient([from angle] [at position], color-stop1, color-stop2, …);

Bắt đầu từ center point, bắt đầu quay default từ top xong quay 1 vòng tròn

    .my-element {
      width: 250px;
      height: 250px;
 
      background: conic-gradient(
        gold 20deg,
        lightcoral 20deg 190deg,
        mediumturquoise 190deg 220deg,
        plum 220deg 320deg,
        steelblue 320deg
      );
 
      border-radius: 50%;
      border: 10px solid;
    }

Repeating and mixing

Notes

repeating-linear-gradient([angle or direction], color-stop1, color-stop2, …);

• Mỗi loại gradient đều có hàm repeating.

  • repeating-linear-gradient, …

• angle or direction: xác định góc hoặc hướng của gradient. Eg: 90deg, to right, to bottom

• color-stop1, color-stop2, … là các màu và vị trí của các điểm dừng màu trong gradient.

      background: repeating-linear-gradient(
        45deg,
        red,
        red 30px,
        white 30px,
        white 60px
      );

Trong ví dụ trên, màu đỏ sẽ kéo dài từ tâm ⇒ 30px, sau đó màu trắng kéo dài thêm 30px, từ 30px tới vị trí 60px, sau đó lặp lại.