Công cụ Gradient CSS Trực tuyến
CSS Gradient là một trang web nhỏ vui vẻ và là công cụ miễn phí cho phép bạn tạo nền gradient cho các trang web.
CSS gradient cho phép bạn hiển thị các chuyển tiếp mượt mà giữa hai hoặc nhiều màu được chỉ định.
CSS xác định hai loại gradient:
- Gradients tuyến tính (đi xuống / lên / trái / phải / theo đường chéo)
- Radial Gradients (được xác định bởi trung tâm của chúng)
CSS Linear Gradients
Để tạo một gradient tuyến tính, bạn phải xác định ít nhất hai điểm dừng màu. Điểm dừng màu là những màu bạn muốn tạo ra các chuyển tiếp mượt mà giữa các màu. 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 gradient.
Cú pháp
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
CSS Radial Gradients
A radial gradient is defined by its center.
To create a radial gradient you must also define at least two color stops.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, shape is ellipse, size is farthest-corner, and position is center.
Set Shape
The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.
The following example shows a radial gradient with the shape of a circle:
