css颜色渐变数值调试
<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 发布,如需转载请注明出处。