如何使用 CSS 为您的项目添加渐变？

CSS 中的渐变是一种特殊类型的图像，由两种或多种颜色之间的渐进平滑过渡组成。梯度可以通过 3 种方式形成：

• Linear-gradient ：它是CSS中的一个内置函数，用于将线性渐变设置为背景图像。
• Radial-gradient ：它是 CSS 中的一个内置函数，用于将径向渐变设置为背景图像。
• Conic-gradient ：它是 CSS 中的一个内置函数，用于将圆锥渐变设置为背景图像。

渐变通常将两种或多种颜色相互合并，尽管在 CSS 中，您可以控制这些变化。例如，您可以更改方向、角度、位置、渐变强度等。由于渐变只是背景图像，所以

CSS渐变

我们可以将背景图像设置为线性渐变或径向渐变，最终将其传递给开始或结束颜色。

在线性梯度函数的情况下，图像中的颜色之间沿着直线的渐进过渡，而在径向梯度函数的情况下，图像中的颜色之间沿着半径（从原点辐射）之间存在渐进过渡。圆锥梯度角从 0 度到 360 度开始。圆锥是圆形的，并使用元素的中心作为颜色停止的源点。在本文中，我们将学习 CSS 中的所有这些渐变，并通过示例了解其实现。

颜色停止：颜色停止通知浏览器使用什么颜色，在渐变的起点和停止位置。默认情况下，它们是等距的，但我们可以通过提供特定的色标来推翻它。

有多种方法可以创建渐变，下面给出了其中的一些：

• 角度：您可以使用角度指定渐变 CSS 属性。这里0deg代表向上，正值代表顺时针旋转。当我们在正方向上增加度数的值，比如从 0 度到 90 度，色标从向上向右移动，因此 90 度代表正确的方向。

linear-gradient(30deg, red, blue);

• Side or Corner：它由两个单词 to 和 up to（两个关键字）组成。一个指定水平边，即左侧或右侧，另一个指定垂直边，即顶部和底部。如果未指定，则默认为“底部”。

linear-gradient(to right, red, green);

• 百分比：您还可以在百分比值中指定渐变属性。它们是颜色提示（也称为颜色插值提示），它指定两侧的两个色标应如何插入到它们之间的空间中。

linear-gradient ( to top, red 10%, purple 45%);

让我们依次讨论和理解梯度的所有类别。

线性渐变：它包括向上、向下、向左、向右和对角线的平滑颜色过渡。创建线性渐变所需的最少两种颜色。线性渐变中可能有超过两种颜色的元素。渐变效果需要起点和方向。默认方向是从上到下。

句法：

background-image: linear-gradient(
    direction, color-stop1, color-stop2, ...);

示例 1：此示例说明了使用linear-gradient()函数以在不同角度使用它。

HTML

  

    

  

    
Linear Gradients - Using Different Angles
    

        0deg
    
    

      
    

        90deg
    
    


  

输出：

示例 2：此示例通过使用从右到左的多色线性渐变来说明linear-gradient()函数的使用。

HTML

  

    

  

    

        geeksforgeeks
    

  

输出：

从右到左线性渐变

示例 3：此示例通过使用 rgba( )函数的透明渐变来说明linear-gradient()函数的使用。

HTML

  

    

  

    
GeeksforGeeks

  

输出：

使用 rgba()函数的透明度渐变。

文本渐变：要为文本添加渐变，我们使用 background-clip 属性。为此，首先，编写您选择的文本，然后在其背景上应用渐变。 Background-clip 属性删除除文本后面区域之外的背景。然后我们使文本颜色透明，以便在文本上可以清楚地看到渐变。

示例 4：此示例说明了使用Background-clip属性来删除除文本后面区域之外的背景。

HTML

  

    

  

    
GeeksforGeeks

  

输出：

文字渐变

Radial Gradients：它是 CSS 中的一个内置函数，用于将径向渐变设置为背景图像。它从一个点开始并向外散发。默认情况下，第一种颜色从元素的中心位置开始，然后向元素边缘逐渐淡出到结束颜色。淡出以相同的速率发生，直到指定为止。它可用于制作从一个点（中心）开始并向外扩展的同心圆。

句法：

background-image: radial-gradient(
    shape size at position, start-color, ..., last-color);

例子：这个例子说明了radial-gradient()函数的使用。

HTML

  

    

  

    
GeeksforGeeks

  

输出：

径向渐变

Conic-gradient：它是 CSS 中的一个内置函数，用于将圆锥渐变设置为背景图像。圆锥梯度角从 0 度到 360 度开始。圆锥是圆形的，并使用元素的中心作为颜色停止的源点。

圆锥渐变包括饼图和色轮。 conic-gradient()函数的结果是数据类型的对象，它是一种特殊的图像。

句法：

Background image: conic-gradient(color degree, color degree, ...);

圆锥渐变类似于径向渐变，不同之处在于色标位于创建的圆的外边缘。

示例：此示例说明了conic-gradient()函数的使用。

HTML

  

    
    

  

    
GeeksforGeeks
    
Conic-gradient
    


  

输出：