6款漂亮的渐变纹理背景图案

可用于网页全屏或区块的背景图片。比较实用的一款CSS3作品。

CSS3, pattern

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    margin: 0;
}
.gradients {
    position: relative;
}
.slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 0;
    height: 0;
    padding: 0;
    font-size: 0;
    background-color: transparent;
    border-style: solid;
    outline: none;
    -webkit-transition: border-color 0.25s;
    transition: border-color 0.25s;
}
.slick-prev {
    left: 20px;
    border-width: 50px 50px 50px 0;
    border-color: transparent rgba(0, 0, 0, 0.3) transparent transparent;
}
.slick-prev:hover {
    border-color: transparent rgba(0, 0, 0, 0.5) transparent transparent;
}
.slick-next {
    right: 20px;
    border-width: 50px 0 50px 50px;
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.3);
}
.slick-next:hover {
    border-color: transparent transparent transparent rgba(0, 0, 0, 0.5);
}
[class^="gradient-"] {
    width: 100vw;
    height: 100vh;
}
.gradient-1 {
    background: -webkit-linear-gradient(left, rgba(25, 33, 41, 0.5) 0%, rgba(69, 69, 75, 0.1) 60%, rgba(25, 33, 41, 0.5) 100%), #303641 -webkit-linear-gradient(0deg, #192129, #303641, #484e57);
    background: linear-gradient(to right, rgba(25, 33, 41, 0.5) 0%, rgba(69, 69, 75, 0.1) 60%, rgba(25, 33, 41, 0.5) 100%), #303641 linear-gradient(90deg, #192129, #303641, #484e57);
    background-size: 5px, 100%;
}
.gradient-2 {
    background: -webkit-linear-gradient(315deg, rgba(25, 33, 41, 0.5) 0%, rgba(69, 69, 75, 0.1) 25%, rgba(25, 33, 41, 0.5) 50%, rgba(69, 69, 75, 0.1) 75%, rgba(25, 33, 41, 0.5) 100%), #303641 -webkit-linear-gradient(0deg, #192129, #303641, #484e57);
    background: linear-gradient(135deg, rgba(25, 33, 41, 0.5) 0%, rgba(69, 69, 75, 0.1) 25%, rgba(25, 33, 41, 0.5) 50%, rgba(69, 69, 75, 0.1) 75%, rgba(25, 33, 41, 0.5) 100%), #303641 linear-gradient(90deg, #192129, #303641, #484e57);
    background-size: 8px 8px, 100%;
}
.gradient-3 {
    background: -webkit-linear-gradient(left, rgba(109, 104, 117, 0.5) 0%, rgba(255, 180, 162, 0.1) 60%, rgba(109, 104, 117, 0.5) 100%), #6d6875 -webkit-linear-gradient(0deg, #6d6875, #b5838d, #e5989b, #ffb4a2, #ffcdb2);
    background: linear-gradient(to right, rgba(109, 104, 117, 0.5) 0%, rgba(255, 180, 162, 0.1) 60%, rgba(109, 104, 117, 0.5) 100%), #6d6875 linear-gradient(90deg, #6d6875, #b5838d, #e5989b, #ffb4a2, #ffcdb2);
    background-size: 5px, 100%;
}
.gradient-4 {
    background: -webkit-linear-gradient(315deg, rgba(109, 104, 117, 0.5) 0%, rgba(255, 180, 162, 0.1) 25%, rgba(109, 104, 117, 0.5) 50%, rgba(255, 180, 162, 0.1) 75%, rgba(109, 104, 117, 0.5) 100%), #6d6875 -webkit-linear-gradient(0deg, #6d6875, #b5838d, #e5989b, #ffb4a2, #ffcdb2);
    background: linear-gradient(135deg, rgba(109, 104, 117, 0.5) 0%, rgba(255, 180, 162, 0.1) 25%, rgba(109, 104, 117, 0.5) 50%, rgba(255, 180, 162, 0.1) 75%, rgba(109, 104, 117, 0.5) 100%), #6d6875 linear-gradient(90deg, #6d6875, #b5838d, #e5989b, #ffb4a2, #ffcdb2);
    background-size: 8px 8px, 100%;
}
.gradient-5 {
    background: -webkit-repeating-radial-gradient(0 100%, circle, rgba(27, 27, 30, 0.25), rgba(88, 164, 176, 0.25) 1px, rgba(216, 219, 226, 0.25) 2px, rgba(88, 164, 176, 0.25) 3px, rgba(27, 27, 30, 0.25) 4px), #d8dbe2 -webkit-radial-gradient(0 100%, circle, #1b1b1e, #373f51, #58a4b0, #a9bcd0, #d8dbe2);
    background: repeating-radial-gradient(circle at 0 100%, rgba(27, 27, 30, 0.25), rgba(88, 164, 176, 0.25) 1px, rgba(216, 219, 226, 0.25) 2px, rgba(88, 164, 176, 0.25) 3px, rgba(27, 27, 30, 0.25) 4px), #d8dbe2 radial-gradient(circle at 0 100%, #1b1b1e, #373f51, #58a4b0, #a9bcd0, #d8dbe2);
}
.gradient-6 {
    background: -webkit-linear-gradient(transparent 0px, transparent 49px, rgba(255, 255, 255, 0.2) 50px, transparent 51px, transparent 99px, rgba(255, 255, 255, 0.2) 100px), -webkit-linear-gradient(330deg, transparent 0, transparent 48px, rgba(255, 255, 255, 0.2) 49px, transparent 50px, transparent 98px, rgba(255, 255, 255, 0.2) 99px, transparent 100px), -webkit-linear-gradient(30deg, transparent 0, transparent 48px, rgba(255, 255, 255, 0.2) 49px, transparent 50px, transparent 98px, rgba(255, 255, 255, 0.2) 99px, transparent 100px), #f3a183 -webkit-linear-gradient(0deg, #f3a183, #ec6f66);
    background: linear-gradient(transparent 0px, transparent 49px, rgba(255, 255, 255, 0.2) 50px, transparent 51px, transparent 99px, rgba(255, 255, 255, 0.2) 100px), linear-gradient(120deg, transparent 0, transparent 48px, rgba(255, 255, 255, 0.2) 49px, transparent 50px, transparent 98px, rgba(255, 255, 255, 0.2) 99px, transparent 100px), linear-gradient(60deg, transparent 0, transparent 48px, rgba(255, 255, 255, 0.2) 49px, transparent 50px, transparent 98px, rgba(255, 255, 255, 0.2) 99px, transparent 100px), #f3a183 linear-gradient(90deg, #f3a183, #ec6f66);
    background-size: 100px 100px, 115px 100px, 115px 100px, auto;
}

HTML

可用于网页全屏或区块的背景图片。比较实用的一款CSS3作品。

CSS3, pattern

编辑器支持Emmet

快捷键

可用于网页全屏或区块的背景图片。比较实用的一款CSS3作品。

CSS3, pattern

HTML5一款漂亮的内含花朵的正方形动画背景图案

CSS3渐变条纹背景图案的旋转效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：