当前位置：首页 > 技术博客 > CSS > css颜色渐变数值调试

css颜色渐变数值调试

admin2年前 (2021-06-25)CSS616

<style>
:root {
  --color-background: #e8e0fd;
  --color-text: #111;
  --font-family: Roboto, sans-serif;
}


body {
  background-color: #e8e0fd;
  background-color: var(--color-background);
  color: #111;
  color: var(--color-text);
  display: grid;
  font-family: Roboto, sans-serif;
  font-family: var(--font-family);
  line-height: 1.5;
  margin: 0;
  min-height: 100vh;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  place-content: center;
}

.app {
  padding: 5vmin;
}

.grid {
  width: 90vw;
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
}

.aspect-ratio {
  overflow: hidden;
  padding-top: 100%;
  position: relative;
}

.aspect-ratio > * {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.palettes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 3em;
  gap: 3em;
}

.palette {
  -webkit-box-shadow: 0.25em 0.25em 2em rgba(0, 0, 0, 0.25);
          box-shadow: 0.25em 0.25em 2em rgba(0, 0, 0, 0.25);
  border-radius: 0.5em;
  margin: 0;
  overflow: hidden;
}

.palette__caption {
  background-color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 1.5em;
  text-align: center;
  text-transform: uppercase;
}
</style>
<div id="root">
	<div class="app">
		<div class="grid">
			<div class="palettes">
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(244, 0, 118), rgb(223, 152, 250));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#f40076 – #df98fa
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(240, 105, 102), rgb(250, 214, 166));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#f06966 – #fad6a6
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(255, 0, 118), rgb(89, 15, 183));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#ff0076 – #590fb7
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(144, 85, 255), rgb(19, 226, 218));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#9055ff – #13e2da
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(11, 99, 246), rgb(0, 60, 197));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#0b63f6 – #003cc5
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(214, 255, 127), rgb(0, 179, 204));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#d6ff7f – #00b3cc
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(226, 51, 255), rgb(255, 107, 0));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#e233ff – #ff6b00
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(223, 152, 250), rgb(144, 85, 255));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#df98fa – #9055ff
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(237, 123, 132), rgb(144, 85, 255));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#ed7b84 – #9055ff
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(64, 37, 101), rgb(48, 190, 150));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#402565 – #30be96
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(64, 38, 98), rgb(57, 0, 166));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#402662 – #3900a6
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(241, 70, 88), rgb(220, 37, 55));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#f14658 – #dc2537
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(244, 0, 118), rgb(52, 39, 17));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#f40076 – #342711
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(0, 0, 102), rgb(102, 153, 255));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#000066 – #6699ff
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(203, 94, 238), rgb(75, 225, 236));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#cb5eee – #4be1ec
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(250, 124, 187), rgb(241, 70, 88));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#fa7cbb – #f14658
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(115, 125, 254), rgb(255, 202, 201));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#737dfe – #ffcac9
					</figcaption>
				</figure>
				<figure class="palette">
					<div class="aspect-ratio" style="padding-top: 100%;">
						<div style="background-image: linear-gradient(135deg, rgb(47, 128, 237), rgb(178, 255, 218));">
						</div>
					</div>
					<figcaption class="palette__caption">
						#2f80ed – #b2ffda
					</figcaption>
				</figure>
			</div>
		</div>
	</div>
</div>

前端er推荐的css渐变特效，直接在电脑端的控制台调试即可！电脑用户可以直接点击上面的【运行代码】