<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>
<ul class="patterns">
<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>: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;
}
}document.addEventListener('click', e => e.target.update && e.target.update());
External CSS
This Pen doesn't use any external CSS resources.