如何使用HTML、CSS和JavaScript创建线性渐变颜色生成器

背景生成器可以通过使用 HTML 、 CSS 和 JavaScript 来制作。它将根据您选择的值生成渐变背景。我们将添加两个文件，即 style.css 和 script.js ，以向我们的HTML文件 (index.html) 添加CSS和JS。我们使用了一个空的h3标签，以便可以显示线性渐变的颜色代码。

HTML: 将代码保存为一个文件，名为 index.html 。在 index.html 文件中，我们将使用两个类型为“color”的输入框来获取渐变色的值。

CSS: 对于CSS，我们只做了一些基本的样式设置，包括一些字体和默认背景颜色。您可以使用下面的样式表作为参考，通过更改一些字体和颜色来创建自己的自定义样式。

JavaScript: 现在来到JavaScript部分。我们首先使用 document.querySelector() 方法选择了color1和color2节点。使用相同的方法，我们还选择了h3和body。如果您不知道querySelector的工作原理，我们强烈建议您首先学习一下。现在我们创建一个函数，将新选择的渐变色设置为背景。在此函数中，我们只需将使用document.querySelector()获取的值应用到背景上。我们使用css.textcontent将linear-gradient的值分配给h3标签。

HTML代码

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Gradient color generator</title> 
</head> 
  
<body class="change"> 
    <h1>GeeksforGeeks</h1> 
    <h3>Gradient color generator</h3> 
  
    <b>Current Colors for Gradient Background:</b> 
  
    <!-- Default color for gradient -->
    <input class="color1" type="color" value="#0000ff" /> 
    <input class="color2" type="color" value="#add8e6" /> 
</body> 
  
</html>

CSS代码

<style> 
    /* Styling body */
    body { 
        font: "Roboto"; 
        text-align: center; 
        background: linear-gradient(to right, #0000ff, #add8e6); 
    } 
      
    /* h1 tag text color */
    h1 { 
    color: white; 
    } 
</style>