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.