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 l.........完整代码请登录后点击上方下载按钮下载查看