使用CSS3构建的渐变色艺术画 - 山谷和云彩

CSS Gradient Art Valleys，使用线性渐变(linear-gradient)实现。

css3, art, background-image

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);
html,
body {
    height: 100%;
}
body {
    font-family: 'Open Sans Condensed', sans-serif;
    background-color: #dBAEf1;
}
.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    text-transform: uppercase;
    line-height: 1.2;
}
h1 {
    color: #fff;
    font-weight: bold;
    font-size: 32.16px;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.25);
    margin-bottom: 1vw;
}
span {
    color: rgba(0, 0, 0, 0.75);
    font-size: 10.56px;
    display: block;
}
.bg {
    width: 480px;
    height: 360px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #9758A3;
    box-shadow: 10px 10px 12px rgba(0, 0, 0, 0.7);
    background-image: -webkit-radial-gradient(50% 100% circle, #351648 6%, rgba(0, 0, 0, 0) 6%), -webkit-radial-gradient(50% 100% circle, #ab87be 7%, rgba(0, 0, 0, 0) 7%), -webkit-radial-gradient(50% 100% circle, #a57bb7 7%, rgba(0, 0, 0, 0) 7%), -webkit-radial-gradient(50% 100% circle, #a070b1 7%, rgba(0, 0, 0, 0) 7%), -webkit-radial-gradient(50% 100% circle, #9b64aa 12.5%, rgba(0, 0, 0, 0) 12.5%), -webkit-radial-gradient(50% 100% circle, #995fa7 12.5%, rgba(0, 0, 0, 0) 12.5%);
    background-image: radial-gradient(circle at 50% 100%, #351648 6%, rgba(0, 0, 0, 0) 6%), radial-gradient(circle at 50% 100%, #ab87be 7%, rgba(0, 0, 0, 0) 7%), radial-gradient(circle at 50% 100%, #a57bb7 7%, rgba(0, 0, 0, 0) 7%), radial-gradient(circle at 50% 100%, #a070b1 7%, rgba(0, 0, 0, 0) 7%), radial-gradient(circle at 50% 100%, #9b64aa 12.5%, rgba(0, 0, 0, 0) 12.5%), radial-gradient(circle at 50% 100%, #995fa7 12.5%, rgba(0, 0, 0, 0) 12.5%);
    background-size: 6% 100%, 6% 100%, 6% 100%, 6% 100%, 10% 100%, 12.5% 100%;
    background-position: 0 360px, 0 351px, 0 342px, 0 331.2px, 0 311.4px, 0 286.2px;
}
.bg:before,
.bg:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.bg:before {
    background-image: -webkit-linear-gradient(30deg, #5A2D80 48px, transparent 48px), -webkit-linear-gradient(150deg, #5A2D80 48px, transparent 48px), -webkit-linear-gradient(30deg, #5A2D80 21px, transparent 21px), -webkit-linear-gradient(150deg, #5A2D80 21px, transparent 21px), -webkit-linear-gradient(30deg, #5A2D80 21px, transparent 21px), -webkit-linear-gradient(150deg, #5A2D80 21px, transparent 21px), -webkit-linear-gradient(30deg, #774198 21px, transparent 21px), -webkit-linear-gradient(150deg, #774198 21px, transparent 21px), -webkit-linear-gradient(30deg, #774198 21px, transparent 21px), -webkit-linear-gradient(150deg, #774198 21px, transparent 21px), -webkit-linear-gradient(30deg, #5A2D80 30px, transparent 30px), -webkit-linear-gradient(150deg, #5A2D80 30px, transparent 30px), -webkit-linear-gradient(30deg, #5A2D80 30px, transparent 30px), -webkit-linear-gradient(150deg, #5A2D80 30px, transparent 30px), -webkit-linear-gradient(30deg, #351648 48px, transparent 48px), -webkit-linear-gradient(150deg, #351648 48px, transparent 48px), -webkit-linear-gradient(30deg, #351648 48px, transparent 48px), -webkit-linear-gradient(150deg, #351648 48px, transparent 48px), -webkit-linear-gradient(30deg, #774198 46.8px, transparent 46.8px), -webkit-linear-gradient(150deg, #774198 46.8px, transparent 46.8px), -webkit-linear-gradient(30deg, #774198 46.8px, transparent 46.8px), -webkit-linear-gradient(150deg, #774198 46.8px, transparent 46.8px), -webkit-linear-gradient(15deg, #774198 42px, transparent 42px), -webkit-linear-gradient(165deg, #774198 42px, transparent 42px), -webkit-linear-gradient(15deg, #774198 42px, transparent 42px), -webkit-linear-gradient(165deg, #774198 42px, transparent 42px), -webkit-linear-gradient(15deg, #432A6F 60px, transparent 60px), -webkit-linear-gradient(165deg, #432A6F 60px, transparent 60px), -webkit-linear-gradient(15deg, #351648 48px, transparent 48px), -webkit-linear-gradient(165deg, #351648 48px, transparent 48px), -webkit-linear-gradient(15deg, #351648 48px, transparent 48px), -webkit-linear-gradient(165deg, #351648 48px, transparent 48px);
    background-image: linear-gradient(60deg, #5A2D80 48px, transparent 48px), linear-gradient(-60deg, #5A2D80 48px, transparent 48px), linear-gradient(60deg, #5A2D80 21px, transparent 21px), linear-gradient(-60deg, #5A2D80 21px, transparent 21px), linear-gradient(60deg, #5A2D80 21px, transparent 21px), linear-gradient(-60deg, #5A2D80 21px, transparent 21px), linear-gradient(60deg, #774198 21px, transparent 21px), linear-gradient(-60deg, #774198 21px, transparent 21px), linear-gradient(60deg, #774198 21px, transparent 21px), linear-gradient(-60deg, #774198 21px, transparent 21px), linear-gradient(60deg, #5A2D80 30px, transparent 30px), linear-gradient(-60deg, #5A2D80 30px, transparent 30px), linear-gradient(60deg, #5A2D80 30px, transparent 30px), linear-gradient(-60deg, #5A2D80 30px, transparent 30px), linear-gradient(60deg, #351648 48px, transparent 48px), linear-gradient(-60deg, #351648 48px, transparent 48px), linear-gradient(60deg, #351648 48px, transparent 48px), linear-gradient(-60deg, #351648 48px, transparent 48px), linear-gradient(60deg, #774198 46.8px, transparent 46.8px), linear-gradient(-60deg, #774198 46.8px, transparent 46.8px), linear-gradient(60deg, #774198 46.8px, transparent 46.8px), linear-gradient(-60deg, #774198 46.8px, transparent 46.8px), linear-gradient(75deg, #774198 42px, transparent 42px), linear-gradient(-75deg, #774198 42px, transparent 42px), linear-gradient(75deg, #774198 42px, transparent 42px), linear-gradient(-75deg, #774198 42px, transparent 42px), linear-gradient(75deg, #432A6F 60px, transparent 60px), linear-gradient(-75deg, #432A6F 60px, transparent 60px), linear-gradient(75deg, #351648 48px, transparent 48px), linear-gradient(-75deg, #351648 48px, transparent 48px), linear-gradient(75deg, #351648 48px, transparent 48px), linear-gradient(-75deg, #351648 48px, transparent 48px);
    background-position: 0 0, 0 0, 186px 0, 186px 0, 294px 0, 294px 0, 87px 0, 87px 0, 393px 0, 393px 0, 372px 0, 372px 0, 108px 0, 108px 0, 108px 0, 108px 0, 372px 0, 372px 0, 330.24px 0, 330.24px 0, 149.76px 0, 149.76px 0, 72px 0, 72px 0, 408px 0, 408px 0, 0 0, 0 0, 36px 0, 36px 0, 444px 0, 444px 0;
}
.bg:after {
    background-image: -webkit-radial-gradient(50% 100% circle, #351648 9px, rgba(0, 0, 0, 0) 9px), -webkit-radial-gradient(50% 100% circle, #351648 12px, rgba(0, 0, 0, 0) 12px), -webkit-radial-gradient(50% 100% circle, #351648 16.5px, rgba(0, 0, 0, 0) 16.5px), -webkit-radial-gradient(50% 100% circle, #351648 10.5px, rgba(0, 0, 0, 0) 10.5px), -webkit-radial-gradient(50% 100% circle, #351648 9px, rgba(0, 0, 0, 0) 9px), -webkit-radial-gradient(50% 100% circle, #351648 7.5px, rgba(0, 0, 0, 0) 7.5px), -webkit-radial-gradient(50% 100% circle, #351648 24px, rgba(0, 0, 0, 0) 24px), -webkit-radial-gradient(50% 100% circle, #351648 19.5px, rgba(0, 0, 0, 0) 19.5px), -webkit-radial-gradient(50% 100% circle, #351648 15.6px, rgba(0, 0, 0, 0) 15.6px), -webkit-radial-gradient(50% 100% circle, #e6ab6f 22.5px, rgba(0, 0, 0, 0) 22.5px), -webkit-radial-gradient(50% 0% circle, #e6ab6f 22.5px, rgba(0, 0, 0, 0) 22.5px), -webkit-radial-gradient(50% 100% circle, #351648 10.5px, rgba(0, 0, 0, 0) 10.5px), -webkit-radial-gradient(50% 100% circle, #351648 13.5px, rgba(0, 0, 0, 0) 13.5px), -webkit-radial-gradient(50% 100% circle, #351648 16.5px, rgba(0, 0, 0, 0) 16.5px);
    background-image: radial-gradient(circle at 50% 100%, #351648 9px, rgba(0, 0, 0, 0) 9px), radial-gradient(circle at 50% 100%, #351648 12px, rgba(0, 0, 0, 0) 12px), radial-gradient(circle at 50% 100%, #351648 16.5px, rgba(0, 0, 0, 0) 16.5px), radial-gradient(circle at 50% 100%, #351648 10.5px, rgba(0, 0, 0, 0) 10.5px), radial-gradient(circle at 50% 100%, #351648 9px, rgba(0, 0, 0, 0) 9px), radial-gradient(circle at 50% 100%, #351648 7.5px, rgba(0, 0, 0, 0) 7.5px), radial-gradient(circle at 50% 100%, #351648 24px, rgba(0, 0, 0, 0) 24px), radial-gradient(circle at 50% 100%, #351648 19.5px, rgba(0, 0, 0, 0) 19.5px), radial-gradient(circle at 50% 100%, #351648 15.6px, rgba(0, 0, 0, 0) 15.6px), radial-gradient(circle at 50% 100%, #e6ab6f 22.5px, rgba(0, 0, 0, 0) 22.5px), radial-gradient(circle at 50% 0%, #e6ab6f 22.5px, rgba(0, 0, 0, 0) 22.5px), radial-gradient(circle at 50% 100%, #351648 10.5px, rgba(0, 0, 0, 0) 10.5px), radial-gradient(circle at 50% 100%, #351648 13.5px, rgba(0, 0, 0, 0) 13.5px), radial-gradient(circle at 50% 100%, #351648 16.5px, rgba(0, 0, 0, 0) 16.5px);
    background-position: 279.6px 127.8px, 295.2px 127.8px, 310.8px 127.8px, 340.8px 98.1px, 351.6px 98.1px, 361.2px 98.1px, 128.4px 90px, 156px 90px, 180px 90px, 127.2px 63.0px, 127.2px 63.0px, 73.2px 78.3px, 91.2px 78.3px, 109.2px 78.3px;
}

HTML

CSS Gradient Art Valleys，使用线性渐变(linear-gradient)实现。

css3, art, background-image

编辑器支持Emmet

快捷键

CSS Gradient Art Valleys，使用线性渐变(linear-gradient)实现。

css3, art, background-image

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

使用CSS3变换和图片构建的3D交互式家居

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：