js实现渐变背景色效果代码-html代码-BFW代码库

js实现渐变背景色效果代码

代码语言：html

所属分类：背景

代码描述：js实现渐变背景色效果代码，点击更换颜色可实现不同的背景色渐变效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,600;1,300;1,600&display=swap");

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  background: radial-gradient(at top left, var(--hsl-0), transparent),
    radial-gradient(at top right, var(--hsl-1), transparent),
    radial-gradient(at bottom right, var(--hsl-2), transparent),
    radial-gradient(at bottom left, var(--hsl-3), transparent);
  color: #fff;
  display: flex;
  font-family: "Nunito", sans-serif;
  flex-direction: column;
  font-size: 1rem;
  justify-content: center;
  line-height: 1.333;
  min-height: 100%;
  text-align: center;
}

main {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: rgba(0, 0, 0, 0.2) 0.5rem 0.5rem 1rem;
  color: #000;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}

h1 {
  font-weight: 600;
}

label,
input {
  display: inline-block;
  padding: 0.5rem;
  vertical-align: middle;
}

input {
  min-height: 3rem;
  min-width: 3rem;
}

pre {
  text-align: left;
}
</style>



</head>

<body  >
  <main>
  <h1>Tetradic radial-background generator</h1>
  <section>
    <label for="color-picker">Pick a color:</label>
    <input type="color" name="color-picker" id="color-picker" value="#4b4b68">
    <pre>        <code id="copy-code"></code>
      </pre>
  </section>
</main>


  
      <script >
const hexToRGB = hex => {
  return hex.
  match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i).
  slice(1).
  map(color => parseInt(color, 16));
};

const hexToHSL = hex => {
  [red, green, blue] = hexT.........完整代码请登录后点击上方下载按钮下载查看