css布局实现16种不同类型渐变背景效果集合代码-html代码-BFW代码库

代码语言：html

所属分类：背景

代码描述：css布局实现16种不同类型渐变背景效果集合代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
  background: #272b36;
  height: 100vh;
  background: #20202a;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.gradient {
  flex: 0 0 auto;
  margin: 1rem;
  width: 300px;
  height: 300px;
  background: black;
  color: white;
  text-shadow: 0 0 5px black;
  padding: 1rem;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
}

.g1 {
  background-image: radial-gradient(circle at 10% 8%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 8%, transparent 8%, transparent 92%), radial-gradient(circle at 87% 45%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 8%, transparent 8%, transparent 92%), radial-gradient(circle at 9% 67%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 6%, transparent 6%, transparent 94%), radial-gradient(circle at 31% 83%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 6%, transparent 6%, transparent 94%), radial-gradient(circle at 46% 54%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 6%, transparent 6%, transparent 94%), radial-gradient(circle at 16% 24%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 6%, transparent 6%, transparent 94%), radial-gradient(circle at 18% 9%, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.03) 6%, transparent 6%, transparent 94%), radial-gradient(circle at 85% 69%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.04) 4%, transparent 4%, transparent 96%), radial-gradient(circle at 55% 7%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.04) 4%, transparent 4%, transparent 96%), radial-gradient(circle at 69% 69%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.04) 4%, transparent 4%, transparent 96%), radial-gradient(circle at 68% 60%, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.04) 4%, transparent 4%, transparent 96%), linear-gradient(135deg, #03072e, #182c92);
}

.g2 {
  background-image: linear-gradient(115deg, #08121c 0%, #181e2f 10%, #2c2a41 19%, #413450 26%, #593d5c 33%, #754867 40%, #8e526d 46%, #ab5f72 52%, #c16c71 57%, #d67c71 63%, #e78f6e 69%, #f3a56d 76%, #fabc6b 84%, #fcd573 100%);
}

.g3 {
  background-image: radial-gradient(circle, #fcd573 0%, #fbc36f 14%, #f8b36d 21%, #f2a36e 26%, #e8906d 30%, #dd836e 35%, #d07671 39%, #c06d74 43%, #af6071 46%, #9d5870 50%, #8a516e 54%, #754867 57%, #624160 61%, #4e3956 65%, #3e324d 69%, #2d2a41 74%, #202337 79%, #141b2a 86%, #08121c 100%);
}

.g4 {
  background: linear-gradient(325deg, #030706 0%, #010e0c 6%, #000f0f 12%, #001414 18%, #00181a 24%, #001b1f 29%, #001d24 35%, #001f29 41%, #00212e 47%, #002638 53%, #00283d 59%, #002942 65%, #002a47 71%, #002e52 76%, #002e57 82%, #002f5c 88%, #003061 94%, #0c3164 100%);
}

.g5 {
  background-image: linear-gradient(0deg, #2c0723 9%, #671d21 25%, #8b281d 32%, #a7321b 38%, #bf3918 43%, #d24014 48%, #e6450f 52%, #f94b06 57%, #fa7229 62%, #fb8c37 67%, #fba141 72%, #fcb44f 78%, #fdc658 84%, #fed65d 92%, #ffe666 100%);
}

.g6 {
  background-image: radial-gradient(circle 5px at top left, #c8c8c8 0%, #c8c8c8 50%, #b5b5b5 50%, #b5b5b5 30%, transparent 30%, transparent 50%), linear-gradient(90deg, white, white);
  background-size: 20px 20px;
}

.g7 {
  background-image: radial-gradient(circle at center center, transparent 0%, #212121 99%), repeating-linear-gradient(0deg, rgba(163, 163, 163, 0.2) 0px, rgba(163, 163, 163, 0.2) 1px, transparent 1px, transparent 6px), repeating-linear-gradient(90deg, rgba(163, 163, 163, 0.2) 0px, rgba(163, 163, 163, 0.2) 1px, transparent 1px, transparent 6px), linear-gradient(90deg, #212121, #212121);
}

.g8 {
  background-image: repeating-linear-gradient(90deg, rgba(201, 201, 201, 0.06) 0px, rgba(201, 201, 201, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(0deg, rgba(201, 201, 201, 0.06) 0px, rgba(201, 201, 201, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(0deg, r.........完整代码请登录后点击上方下载按钮下载查看