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

css颜色渐变数值调试

4年前 (2021-06-25)CSS966 

<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渐变特效，直接在电脑端的控制台调试即可！电脑用户可以直接点击上面的【运行代码】

版权声明：本文由 LzxBlog 发布，如需转载请注明出处。

本文链接：https://www.liuzhixi.cn/html/88.html

标签: CSS
返回列表

上一篇：夜晚云层动画特效

下一篇：炫酷的登录注册表单切换代码

相关文章

拟物风格创意的开关按钮切换特效

拟物风格创意的开关按钮切换特效

使用css3 svg js制作立体的灰白色按钮开关，点击on/off开关按钮切换动画特效。body {   font-famil...

动态的选项卡图标栏svg特效

动态的选项卡图标栏svg特效

使用js css3 svg制作的选项卡图标栏切换特效，点击图标高亮动画切换效果。这是一款可自适应网页的矢量选项卡图标栏代码。body { &nb...

css3:hover悬停图标展开气泡文本框特效

css3:hover悬停图标展开气泡文本框特效

css3 hover属性制作鼠标悬停图标或标题展示动画文本框效果，类似气泡一样文本框动画特效。下载链接: https://pan.baidu.com/s/1Fc...

3D文字关注动画页面

3D文字关注动画页面

使用css3 keyframes 属性制作蓝色大气的感谢关注3D数字动画特效。适用于404或引导页。<style> @import ur...

CSS原子环绕标志动画

CSS原子环绕标志动画

CSS原子环绕标志动画<head> <meta charset="UTF-8"> <meta...

CSS3金色阴影文字

CSS3金色阴影文字

主要使用了 CSS3 的线性渐变属性、滤镜属性、变形属性等等。由于这些都是高级属性，所以不兼容 IE 10 及以下的版本。<!DOCTYPE h...

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

ICP
提供技术支持 赞助云储存