js+css实现背景渐变色可视化生成css代码-html代码-BFW代码库

js+css实现背景渐变色可视化生成css代码

代码语言：html

所属分类：其他

代码描述：js+css实现背景渐变色可视化生成css代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/patterns.12.6.0.css">

    <style>
        :root {
          --gradient_bg_color: #006dca;
          --gradient_spot1_color: #001a39;
          --gradient_spot1_w: 75%;
          --gradient_spot1_h: 75%;
          --gradient_spot1_x: 0%;
          --gradient_spot1_y: 0%;
          --gradient_spot2_color: #9b70ff;
          --gradient_spot2_w: 75%;
          --gradient_spot2_h: 75%;
          --gradient_spot2_x: 100%;
          --gradient_spot2_y: 0%;
          --gradient_spot3_color: #42ffc6;
          --gradient_spot3_w: 75%;
          --gradient_spot3_h: 75%;
          --gradient_spot3_x: 100%;
          --gradient_spot3_y: 100%;
          --gradient_spot4_color: #ff3b8d;
          --gradient_spot4_w: 75%;
          --gradient_spot4_h: 75%;
          --gradient_spot4_x: 0%;
          --gradient_spot4_y: 100%;
        }
        
        .fancy-gradient {
          background-color: var(--gradient_bg_color);
          background-image: radial-gradient(var(--gradient_spot1_w) var(--gradient_spot1_h) at left var(--gradient_spot1_x) top var(--gradient_spot1_y), var(--gradient_spot1_color), transparent), radial-gradient(var(--gradient_spot2_w) var(--gradient_spot2_h) at left var(--gradient_spot2_x) top var(--gradient_spot2_y), var(--gradient_spot2_color), transparent), radial-gradient(var(--gradient_spot3_w) var(--gradient_spot3_h) at left var(--gradient_spot3_x) top var(--gradient_spot3_y), var(--gradient_spot3_color), transparent), radial-gradient(var(--gradient_spot4_w) var(--gradient_spot4_h) at left var(--gradient_spot4_x) top var(--gradient_spot4_y), var(--gradient_spot4_color), transparent);
        }
        
        .demo {
          max-width: 800px;
          margin: auto;
        }
        
        .demo__widget {
          aspect-ratio: 16/9;
          width: 100%;
          position: relative;
        }
        
        .demo__widget h1 {
          color: rgba(255, 255, 255, 0.8);
          font-family: ui-rounded, system-ui, sans-serif;
          font-size: clamp(24px, 8vw, 70px);
          text-align: center;
          margin: 0;
          position: absolute;
          left: 0;
          right: 0;
          top: 50%;
          transform: translateY(-50%) skew(0deg, -10deg);
          text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.1);
        }
        
        .demo__form {
          margin: 1em;
        }
        
        .demo__form legend {
          font-weight: 600;
        }
        
        .demo__form fieldset {
          align-items: center;
          display: grid;
          gap: 0.33em 1em;
          grid-template-columns: minmax(0, auto) minmax(0, 1fr);
        }
        
        .demo__form input[type=color] {
          width: 100%;
        }
        
        .demo__form textarea {
          font-family: monospace;
          width: 100%;
          height: 5em;
        }
        
        .demo__form-spots {
          display: grid;
          gap: 1em;
          margin-block: 1em;
        }
        @media (min-width: 36em) {
          .demo__form-spots {
            grid-template-columns: 1fr 1fr;
          }
        }
    </style>

</head>

<body>
    <div class="demo">
        <div class="demo__widget fancy-gradient">
            <h1>Highly Customizable Background Gradients!</h1>
        </div>

        <form class="demo__form">
            <fieldset class="u-border-medium u-rounded">
                <legend>Background</legend>
                <label for="bg_color">Color:</label>
                <input type="color" id="bg_color" value="#006dca" />
            </fieldset>

            <div class="demo__form-spots">
                <fieldset class="u-border-medium u-rounded">
                    <legend>Spot One</legend>
                    <label for="spot1_color">Color:</label>
                    <input type="color" id="spot1_color" value="#001a39" />
                    <label for="spot1_w">Width:</label>
                    <input type="range" id="spot1_w" value="75" min="1" />
                    <label for="spot1_h">Height:</label>
                    <input type="range" id="spot1_h" value="75" min="1.........完整代码请登录后点击上方下载按钮下载查看