Trong Photoshop, Gradient bao gồm các kiểu:

1. Linear Gradient : dạng đường thẳng.
2. Ridial Gradient: dạng tròn.
3. Angle Gradient: dạng góc.
4. Reflected Gradient: dạng phản chiếu.
5. Diamond Gradient: dạng kim cương.

Hiện nay, CSS3 đã hỗ trợ 2 kiểu Gradient là Linear Gradient và Radial Gradient. Bài viết này sẽ hướng dẫn các bạn cách sử dụng Linear Gradient trong CSS3.

1. Giải thích cú pháp

Cú pháp chung

linear-gradient (<bg-position> || <angle>, [color-stop],  [color-stop], [color-stop]);

Firefox

-moz-linear-gradient (<bg-position> || <angle>, [color-stop],  [color-stop], [color-stop]);

Webkit

-webkit-gradient (linear, <bg-position>, <color-stop>, <bg-position>, <color-stop>);

Các ví dụ bên dưới sẽ được viết theo cú pháp chung, từ đó các bạn tự chuyển sang các dạng khác cho phù hợp với trình duyệt của mình.

Gradient-Line

Trước tiên, các bạn phải hiểu Gradient-Line là gì? Đó là một đường thẳng dùng tạo ra hiệu ứng Gradient, được xác định bằng điểm đầu (starting-point) và điểm cuối (ending-point). Đường thẳng nào vuông góc với Gradient-Line thì sẽ có cùng mã màu với giao điểm nằm trên Gradient-Line. Theo cú pháp trên, <bg-position> xác định vị trí điểm đầu và <angle> xác định góc, như vậy là có thể xác định được Gradient-Line, không cần tọa độ điểm cuối.

• Nếu bạn chỉ dùng <bg-position> (nghĩa là đã có tạo độ điểm đầu) thì điểm cuối sẽ được tự động xác định bằng cách vẽ đối xứng điểm đầu qua điểm trung tâm của ảnh.
• Nếu bạn chỉ dùng <angle> (đã có góc) thì tùy thuộc vào giá trị của góc mà điểm đầu sẽ được xác định như sau:

1. 0^o <= <angle> < 90^o : Điểm đầu nằm ở góc bottom-left.
2. 90^o <= <angle> <180^o: Điểm đầu nằm ở  góc bottom-right.
3. 180^o <= <angle> <270^o: Điểm đầu nằm ở góc top-right.
4. 270^o <= <angle> < 360^o: Điểm đầu nằm ở góc top-left.

Lưu ý: Góc được tính bằng góc giữa Gradient-Line và trục x. Như hình bên dưới, <angle> có giá trị là 45^o.

Color-stop

Color-stop là điểm nằm trên Gradien-Line, có màu sắc thuần túy, bắt đầu từ điểm này trở đi, màu sắc bắt đầu fade (chuyển tiếp) sang các màu khác cho đến khi đến một điểm <color-stop> khác. Tất nhiên Gradient-Line phải có ít nhất 2 điểm <color-stop> như thế thì mới áp dụng được hiệu ứng Gradient. Trên Gradien-Line có vô số điểm, để xác định <color-stop> bạn sử dụng cú pháp nhỏ sau:

<color> [<percentage> || <length>]

<color> là giá trị màu, <percentage> và <length> sẽ xác định điểm <color-stop>, được tính từ điểm đầu.

VD: #fff 50%: nghĩa là điểm <color-stop> sẽ nằm ở vị trí trung điểm của đường Gradient-Line, và nó có màu trắng.

      #000 20px: <color-stop> nằm cách điểm đầu 20px trên Gradient-Line.

Lưu ý:

• Các điểm <color-stop> phải được viết theo thứ tự từ điểm đầu tính ra, điểm nào gần điểm đầu thì viết trước, cứ thế tiếp tục cho đến các điểm sau cùng.
• Bạn chỉ cần sử dụng 1 trong 2 loại đơn vị trên. Nếu bạn bỏ trống cả 2, thì mặc định <percentage> của điểm <color-stop> đầu tiên là 0%, và của điểm cuối là 100%.

2. Ví dụ

Dưới đây là ví dụ sử dụng CSS3 linear gradient đơn giản, bạn có thể xem demo tại đây

.gradient1 {
  background: -moz-linear-gradient(100% 100% 180deg, #00769D, #00a6dd);
  background: -webkit-gradient(linear, left top, right top, from(#1a82f7), to(#2F2727));
  width: 900px; height: 150px;
}
.gradient2 {
  background: -moz-linear-gradient(100% 100% 90deg, #00769D, #00a6dd);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
  width: 900px; height: 150px;
}

3. Một số công cụ web về Gradient Linear

CSS3 Gradient Generator

Linear Gradient - Westciv

Gradient Creator

CSS Corners