在线 CSS 渐变 - 生成器、制作器和背景

Color

在线 CSS 渐变工具

CSS Gradient 是一个快乐的小网站和免费工具,可让您为网站创建渐变背景。 

CSS 渐变可让您在两种或多种指定颜色之间显示平滑过渡。

CSS 定义了两种类型的渐变:

  • 线性渐变(向下/向上/向左/向右/对角线)
  • 径向渐变(由它们的中心定义)

CSS 线性渐变

要创建线性渐变,您必须定义至少两个色标。色标是您想要在其中呈现平滑过渡的颜色。您还可以设置起点和方向(或角度)以及渐变效果。

句法

background-image: linear-gradient( directioncolor-stop1color-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: