在线 CSS 渐变工具
CSS Gradient 是一个快乐的小网站和免费工具,可让您为网站创建渐变背景。
CSS 渐变可让您在两种或多种指定颜色之间显示平滑过渡。
CSS 定义了两种类型的渐变:
- 线性渐变(向下/向上/向左/向右/对角线)
- 径向渐变(由它们的中心定义)
CSS 线性渐变
要创建线性渐变,您必须定义至少两个色标。色标是您想要在其中呈现平滑过渡的颜色。您还可以设置起点和方向(或角度)以及渐变效果。
句法
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: