CSS3 基础知识 - 线性渐变

水平方向的线性色彩渐变效果

gradient,linear

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1578
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
  margin: 0px;
  padding: 0px; }

body {
  background: linear-gradient(transparent 0%, transparent 20%, white 20%, white 22%, transparent 28%) 0px 0px, linear-gradient(90deg, #8f5503 0%, #361e04 1%, #6d4700 2%, #a05d02 3%, #583902 4%, #f8b530 5%, #704900 6%, #382a00 7%, #765508 8%, #8c5b00 9%, #795500 10%, #0c1000 11%, #332c00 12%, #554700 13%, #534901 14%, #292700 15%, #555205 16%, #cdca55 17%, #4c4c02 18%, #969926 19%, #dadb64 20%, #5b6100 21%, #586202 22%, #141507 23%, #87910a 24%, #4c5208 25%, #4a5008 26%, #393e00 27%, #5b6203 28%, #8d8c00 29%, #8b8304 30%, #9f9d0c 31%, #aa9b02 32%, #e8e210 33%, #fef049 34%, #e6d108 35%, #dabf00 36%, #dec900 37%, #806f03 38%, #4f4000 39%, #c0a70c 40%, #534c04 41%, #221b00 42%, #927f00 43%, #aa8200 44%, #ab8d09 45%, #392a01 46%, #ebb201 47%, #edaa03 48%, #a38700 49%, #5c4a00 50%, #a87701 51%, #a27502 52%, #f9b633 53%, #fec250 54%, #ebab2f 55%, #b37a07 56%, #ef9f08 57%, #b87905 58%, #805d01 59%, #a37900 60%, #584300 61%, #241800 62%, #565002 63%, #6a6200 64%, #5f6400 65%, #6d7505 66%, #2a2b00 67%, #545803 68%, #8d9c03 69%, #808e03 70%, #444b00 71%, #677303 72%, #849803 73%, #7da204 74%, #7cac02 75%, #a1eb00 76%, #d0ff75 77%, #a7f607 78%, #669e07 79%, #67aa05 80%, #4f8106 81%, #72c200 82%, #3b5900 83%, #b3e61b 84%, #effec7 85%, #709801 86%, #2c4800 87%, #a7ba11 88%, #dfde50 89%, #959207 90%, #b8b52a 91%, #cbba36 92%, #bb9c1f 93%, #5d4102 94%, #906b00 95%, #99770b 96%, #866000 97%, #b0791e 98%, #924a02 99%, #4f2800 100%) 0px 0px;
  background-size: 100% 100%; }

HTML

水平方向的线性色彩渐变效果

gradient,linear

编辑器支持Emmet

快捷键

水平方向的线性色彩渐变效果

gradient,linear

使用CSS3线性渐变和合成模式（blend-mode）实现的5种图像特效

CSS3 线性渐变函数效果的动画演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：