8个CSS实现的纹理图案

使用CSS3 线性渐变和径向渐变来实现。

css3, pattern

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}
.box {
    flex: 1 1 auto;
}
.one {
    background: repeating-linear-gradient(45deg, #FFE11A, #FFE11A 50%, #FD7400 50%, #FD7400);
    background-size: 20px 20px;
}
.two {
    background-image: repeating-linear-gradient(45deg, #004C66, #004C66 1em, #008C74 1em, #008C74 50%);
    background-size: 2em 2em;
}
.three {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 1em, #731630 1em, #731630 50%), repeating-linear-gradient(45deg, #40152A, #40152A 1em, #FF5434 1em, #FF5434 50%);
    background-size: 3em 3em, 2em 2em;
}
.four {
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 1em, #9E2053 1em, #9E2053 50%), repeating-linear-gradient(45deg, #111626, #111626 1em, #571B3D 1em, #571B3D 50%);
    background-size: 3em 3em, 2em 2em;
}
.five {
    background: repeating-linear-gradient(10deg, #009393, #009393 50%, #00585F 50%, #00585F);
    background-size: 100% 2em;
}
.six {
    background-image: radial-gradient(ellipse farthest-corner at 2em 2em, #ff9e9d, #ff9e9d 50%, #ff3d7f 50%);
    background-size: 2em 2em;
}
.seven {
    background-image: radial-gradient(ellipse 4em 4em, #bedb39, #bedb39 25%, #1f8a70 25%);
    background-size: 2em 2em;
}
.eight {
    background-image: radial-gradient(ellipse 100% 100%, #013440, #013440 25%, rgba(0, 0, 0, 0) 25%), radial-gradient(ellipse 50% 50%, #ab1a25, #ab1a25 25%, #002635 25%);
    background-size: 1em 1em, 2em 2em;
}

HTML

使用CSS3 线性渐变和径向渐变来实现。

css3, pattern

编辑器支持Emmet

快捷键

使用CSS3 线性渐变和径向渐变来实现。

css3, pattern

使用CSS3实现的几种纹理图案和大象拼图

CSS3渐变实现的斜折线条纹背景图案

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：