使用css-doodle.js实现的12个渐变（linear-gradient）图案背景

12 patterns with css linear-gradient

css3, gradient, pattern

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
    --size: 15em;
}
html,
body,
ul,
li,
header,
h1,
p {
    margin: 0;
    padding: 0;
}
body {
    background: #f3f2eb;
    font-family:
    /* songti */
    
    Georgia, "Nimbus Roman No9 L", "Songti SC", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif;
}
header {
    color: #3B120E;
    padding: 10vmin 0 2vmin;
    position: relative;
    overflow: hidden;
}
header a {
    color: #3b120e;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) center 100% / 100% 15% no-repeat;
    transition: .2s ease;
}
header a:hover {
    color: #E3363A;
    background-size: 100% 20%;
}
header p {
    margin-top: .5em;
    color: #3B120E7a;
}
.wrap,
.patterns {
    max-width: 67.5em;
    margin: 0 auto;
    padding: 0 1.5em;
    box-sizing: border-box;
}
.patterns {
    list-style: none;
    width: 100%;
    margin: 6vmin auto 10vmin;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--size), 1fr));
    grid-gap: 1vmin;
}
ul li {
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
}
.patterns css-doodle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}
@media screen and (max-width: 36.25em) {
    :root {
        --size: 8em;
    }
}

HTML

<header>
    <div class="wrap">
        <h1>Linear-gradient</h1>
        <p>Patterns with
            <a href="https://css-doodle.com" target="_blank">css-doodle</a> and CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient" target="_blank">linear-gradient()</a>.
        </p>
    </div>
</header>

<li>
        <css-doodle grid="1x15" #1>
            background-image: repeating-linear-gradient( calc(@pn(45deg, -45deg)), @multi(15, ( @p(#ED7B4E, #E3363A, #3B120E, #EDEED1, #4CAABE) calc(@n() * 100% / 15), @lp() calc((@n() + 1) * 100% / 15) )) );
        </css-doodle>
    </li>

<li>
        <css-doodle grid="1x20" #2>
            :container { transform: rotate(45deg) translate(-25%); will-change: transform; @size: 150%; } background-image: repeating-linear-gradient( @pd(120deg, -120deg), @multi(@calc(@size() * 2), ( @pd(#E3363A, #3B120E, #4CAABE, #ED7B4E, #EDEED1) calc(@n() *
            100% / (@size() * 2)), @lp() calc((@n() + 1) * 100% / (@size() * 2)) )) );
        </css-doodle>
    </li>

<li>
        <css-doodle grid="10" #3>
            :container { transform: scale(2) rotateY(-45deg) rotate(-45deg); will-change: transform; } background: @multi(5, ( linear-gradient( @pd(#E3363A, #3B120E, #4CAABE, #ED7B4E, #EDEED1), @lp() ) 50% 50% / @pn(30%, 55%, 70%, 85%, 100%) @lp() no-repeat ));
        </css-doodle>
    </li>

<li>
        <css-doodle grid="1x15" #4>
            background-image: repeating-linear-gradient( @multi(@size(), ( @pd(#ED7B4E, #E3363A, #3B120E, #EDEED1, #4CAABE) calc((@n() - 1) * 100% / @size()), @lp() calc(@n() * 100% / @size()) )) ); background-size: 100% 80%; background-position: 0 calc(@i() * @i()
            * -100% / 80);
        </css-doodle>
    </li>

<li>
        <css-doodle grid="8" #5>
            --p: @pn(0 100%, 0 0, 100% 100%, 100% 0); background: @multi(5, ( linear-gradient(@p(#4CAABE, #EDEED1, #ED7B4E, #3B120E, #E3363A), @lp()) var(--p) / @pn(20%, 40%, 60%, 80%, 100%) @lp() no-repeat ))
        </css-doodle>
    </li>

<li>
        <css-doodle grid="8" #6>
            background: @multi(5, linear-gradient( -135deg, @p(#ED7B4E, #E3363A, #3B120E, #4CAABE) 50%, #EDEED1 50% )); background-size: 25% 25%, 25% 25%, 25% 25%, 50% 50%, 100% 100%; background-position: 66.66% 100%, 0 33.33%, 0 100%, 0 100%, 100% 0; background-repeat:
            no-repeat; transform: rotateY(@p(180deg, 0deg)) rotateX(@p(180deg, 0deg));
        </css-doodle>
    </li>

<li>
        <css-doodle grid="8" #7>
            :container { transform: rotate(45deg) scale(1.5); will-change: transform; } background: @multi(10, ( linear-gradient(@p(#E3363A, #3B120E, #4CAABE, #ED7B4E, #EDEED1), @lp()) 100% 100% / calc(@n() * 10%) calc(@n() * 10%) no-repeat ))
        </css-doodle>
    </li>

<li>
        <css-doodle grid="8" #8>
            transform: rotate(@p(45deg, -45deg)) scale(1.5); will-change: transform; background: linear-gradient( @p(#ED7B4E, #E3363A, #3B120E, #4CAABE) 50%, #EDEED1 50% ) 0 0 / 100% @r(10%, 100%);
        </css-doodle>
    </li>

<li>
        <css-doodle grid="8" #9>
            --s: @r(15%, 85%); --t: calc(100% - var(--s)); background: @multi(2, linear-gradient(@p(#ED7B4E, #E3363A, #3B120E, #4CAABE), @lp()) ); background-color: #EDEED1; background-size: var(--s) var(--s), var(--t) var(--t); background-position: 0 0, 100% 100%;
            background-repeat: no-repeat;
        </css-doodle>
    </li>

<li>
        <css-doodle grid="8" #10>
            background: @multi(2, ( linear-gradient( @p(45deg, -45deg), @multi(2, @p(#E3363A, #3B120E, #4CAABE, #ED7B4E, #EDEED1) 50%) ) @p(100% 100%, 0 100%, 100%, 0 0) / calc(@n() * 100% / 2) calc(@n() * 100% / 2) no-repeat ))
        </css-doodle>
    </li>

<li>
        <css-doodle grid="8" #11>
            margin: -20%; transform: rotate(@r(-2deg, 2deg)); mix-blend-mode: @p(color-burn, hard-light); background-blend-mode: @p(color-burn, hard-light); background: linear-gradient( @multi(2, @p(#ED7B4E, #E3363A, #3B120E, #4CAABE, #EDEED1) 50%) ); @random(.5)
            { background: linear-gradient(@p(#ED7B4E, #E3363A, #3B120E, #4CAABE, #EDEED1) 50%, transparent 50%) 0 0 / 100% @r(20%), linear-gradient( @multi(2, @p(#ED7B4E, #E3363A, #3B120E, #4CAABE, #EDEED1) 50%) ); }
        </css-doodle>
    </li>

<li>
        <css-doodle grid="14" #12>
            :container { transform: scale(2) rotateY(-45deg) rotate(-45deg); will-change: transform; } background: linear-gradient(45deg, @multi(2, @p(#ED7B4E, #E3363A, #3B120E, #4CAABE, #EDEED1) 50%) ); mix-blend-mode: @p(color-burn, screen); margin: -25%;
        </css-doodle>
    </li>

</ul>

12 patterns with css linear-gradient

css3, gradient, pattern

编辑器支持Emmet

快捷键

12 patterns with css linear-gradient

css3, gradient, pattern

使用CSS3背景裁剪（background-clip）特性实现的文本标题透视特效

使用CSS3 placeholder-shown过滤器（选择器）实现的浮动输入框标签

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：