mirrors
/
codepens
1
Fork 0
Code Issues Pull Requests Releases Activity
codepens/minimal-pure-css-textile-pa.../dist/index.html

225 lines
74 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Minimal pure CSS textile patterns</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Satisfy&family=Ubuntu+Mono&family=Ubuntu:wght@400;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<header>
<h3>Minimal, pure CSS textile patterns</h3>
<p>Patterns created with CSS gradients. No other images used and they are all <em>tiny</em>! All of them are under 500 bytes minified, some of them well under!</p>
</header>
<main class="grid">
<article class="item grid" data-size="175">
<h4>The red and the black: lumbejack plaid</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c0" type="checkbox"/>
<label for="c0">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#e72e33</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#020202</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#020202</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#e72e33</span> <span class="token--len">0</span> <span class="token--len">5.66px</span></span></span><span class="token--punc">)</span></span></span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/lumberjack-plaid-pattern-red-black-vector-1361275850" target="_blank">Pattern idea</a><a href="https://www.youtube.com/watch?v=CT4i5Nx1jJM" target="_blank">Name idea</a></footer>
</article>
<article class="item grid" data-size="180">
<h4>Purple and light green tartan</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c1" type="checkbox"/>
<label for="c1">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#d2e5b7</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#79598b</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">hsla(278, 21%, 47%, .3)</span> <span class="token--len">0</span> <span class="token--len">1px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#d2e5b7</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span></span><span class="token--punc">)</span></span> <span class="token--item"><span class="token--col">#d2e5b7</span></span></span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/seamless-fabric-pattern-stripes-diagonal-hatching-452442490" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="175">
<h4>Tattersall in blue and off-white</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c2" type="checkbox"/>
<label for="c2">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">75%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f0efea</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#3c517c</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">2em</span> <span class="token--len">2em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#3c517c</span> <span class="token--len">0</span> <span class="token--len">1.41px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f0efea</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span></span><span class="token--punc">)</span></span></span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/plaid-pattern-set-tattersall-blue-green-1942725841" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="90">
<h4>Minimalist rhombic aqua rhombi</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c3" type="checkbox"/>
<label for="c3">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">30deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#afe9dd</span> <span class="token--len">0%</span> <span class="token--ang">120deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#9bc3bb</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">6.928em</span></span></span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/minimalist-vector-geometric-seamless-pattern-collection-1844646445" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="225">
<h4>Christmas rhombi</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c4" type="checkbox"/>
<label for="c4">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#fdfdfd</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">56deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-56deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">34deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#b5191d</span> <span class="token--len">0%</span> <span class="token--ang">112deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#e1d9a8</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">2.237em</span> <span class="token--len">0</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-size</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">4.474em</span> <span class="token--len">6.632em</span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/seamless-christmas-wrapping-paper-pattern-1584242947" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="335">
<h4>Column argyle</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c5" type="checkbox"/>
<label for="c5">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">hsla(0, 0%, 100%, .5)</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--s</span><span class="token--punc">:</span> <span class="token--val"><span class="token--sep">/</span> <span class="token--len">3.632em</span> <span class="token--len">7.128em</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">63deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-63deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">27deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#93b4c5</span> <span class="token--len">0%</span> <span class="token--ang">126deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">1.816em</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">90deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#b43129</span> <span class="token--ang">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#596c7b</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">1.816em</span><span class="token--sep">/</span> <span class="token--len">7.264em</span></span></span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/argyle-pattern-diamond-shapes-background-378496120" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="315">
<h4>Blue, green and tan diagonal argyle</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c6" type="checkbox"/>
<label for="c6">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#fff</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--s</span><span class="token--punc">:</span> <span class="token--val"><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">6.928em</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">60deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-60deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">30deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#d6cdac</span> <span class="token--len">0%</span> <span class="token--ang">120deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">2em</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#9cb3bb</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#9cb08b</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">2em</span><span class="token--sep">/</span> <span class="token--len">8em</span> <span class="token--len">13.856em</span></span></span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-illustration/blue-green-tan-argyle-5938837" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="170">
<h4>Vintage green sunken cubes</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c7" type="checkbox"/>
<label for="c7">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#588333</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">2em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#6d983f</span> <span class="token--ang">135deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#c3d87d</span> <span class="token--len">0%</span> <span class="token--ang">225deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#79ab4a</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-size</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">4em</span> <span class="token--len">4em</span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/seamless-christmas-wrapping-paper-pattern-1584242947" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="380">
<h4>Tartan plaid</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c8" type="checkbox"/>
<label for="c8">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">25%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">0</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">80px</span> <span class="token--len">20px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">20px</span> <span class="token--len">80px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">60px</span> <span class="token--len">40px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">red</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">80px</span> <span class="token--len">20px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">40px</span> <span class="token--len">60px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">40px</span> <span class="token--len">60px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">20px</span> <span class="token--len">80px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">red</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">red</span> <span class="token--len">0</span> <span class="token--len">1.41px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span></span><span class="token--punc">)</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-size</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">100px</span> <span class="token--len">100px</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">normal</span><span class="token--punc">,</span> <span class="token--keyw">normal</span><span class="token--punc">,</span> <span class="token--keyw">color</span><span class="token--punc">,</span> <span class="token--keyw">difference</span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/tartan-seamless-pattern-trendy-illustration-wallpapers-505105147" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="160">
<h4>Violet table cloth</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c9" type="checkbox"/>
<label for="c9">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#a17bb6</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#a17bb6</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">0.5em</span> <span class="token--len">0.5em</span></span></span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/violet-seamless-table-cloth-square-checkered-619757561" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="360">
<h4>Varicolored zigzag</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c10" type="checkbox"/>
<label for="c10">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">#0a0432</span> <span class="token--len">calc(50% - 4.24px)</span><span class="token--punc">,</span> <span class="token--col">#fff</span> <span class="token--len">0</span> <span class="token--len">calc(50% + 4.24px)</span><span class="token--punc">,</span> <span class="token--col">#0a0432</span> <span class="token--len">0</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">90deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fe0478</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#afec32</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f35932</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#0affd3</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">384px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#fff</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#0a0432</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">12px</span> <span class="token--len">12px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">96px</span> <span class="token--len">72px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">6px</span><span class="token--sep">/</span> <span class="token--len">96px</span> <span class="token--len">72px</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">darken</span><span class="token--punc">,</span> <span class="token--keyw">darken</span><span class="token--punc">,</span> <span class="token--keyw">lighten</span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/varicolored-point-zigzag-pattern-decoration-background-385372471" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="335">
<h4>Blue 3Q argyle</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c11" type="checkbox"/>
<label for="c11">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#c1986b</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--s</span><span class="token--punc">:</span> <span class="token--val"><span class="token--sep">/</span> <span class="token--len">5.142em</span> <span class="token--len">6.128em</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">50deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-50deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">40deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#2f4d7f</span> <span class="token--len">0%</span> <span class="token--ang">100deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">2.571em</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#26a9e1</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#b87b83</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#d4b57e</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">2.571em</span><span class="token--sep">/</span> <span class="token--len">10.284em</span> <span class="token--len">12.256em</span></span></span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/argyle-blue-seamless-pattern-design-187460177" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="380">
<h4>Quarter overlap argyle</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c12" type="checkbox"/>
<label for="c12">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#fff</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">40deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#c71585</span> <span class="token--len">0%</span> <span class="token--ang">100deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#8a2be2</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">7.714em</span> <span class="token--len">9.192em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">40deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#b3b3b3</span> <span class="token--len">0%</span> <span class="token--ang">100deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#4d4d4d</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">3.857em</span><span class="token--sep">/</span> <span class="token--len">7.714em</span> <span class="token--len">9.192em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">50deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3.857em</span> <span class="token--len">4.596em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-50deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3.857em</span> <span class="token--len">4.596em</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">color</span><span class="token--punc">,</span> <span class="token--keyw">difference</span><span class="token--punc">,</span> <span class="token--keyw">normal</span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/argyle-layout-design-pink-blue-253840555" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="395">
<h4>Autumn argyle</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c13" type="checkbox"/>
<label for="c13">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#fff</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--p</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">0%</span> <span class="token--ang">126.86deg</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">63.43deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3em</span> <span class="token--len">6em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-63.43deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3em</span> <span class="token--len">6em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">26.57deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#1b1c4a</span></span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--p</span><span class="token--punc">)</span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3em</span> <span class="token--len">12em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">26.57deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#147fa3</span></span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--p</span><span class="token--punc">)</span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">6em</span><span class="token--sep">/</span> <span class="token--len">3em</span> <span class="token--len">12em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#fcb543</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f3753b</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">6em</span> <span class="token--len">12em</span></span></span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/argyle-pattern-colorful-autumn-blue-orange-1918988069" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="485">
<h4>Purple stich</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c14" type="checkbox"/>
<label for="c14">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--a</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">#000</span> <span class="token--len">calc(50% - 5.66px)</span><span class="token--punc">,</span> <span class="token--col">#7d4caf</span> <span class="token--len">0</span> <span class="token--len">calc(50% + 5.66px)</span><span class="token--punc">,</span> <span class="token--col">#000</span> <span class="token--len">0</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--b</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">#9f7cc7</span> <span class="token--len">0%</span> <span class="token--len">25%</span><span class="token--punc">,</span> <span class="token--col">#000</span> <span class="token--len">0%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">8px</span> <span class="token--len">8px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#000</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#cfa7ff</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">28px</span> <span class="token--len">60px</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--a</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--a</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#601286</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">4px</span> <span class="token--len">4px</span><span class="token--sep">/</span> <span class="token--len">1em</span> <span class="token--len">1em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">45deg</span> <span class="token--keyw">at</span> <span class="token--len">calc(50% + 8px)</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">225deg</span> <span class="token--keyw">at</span> <span class="token--len">calc(50% - 8px)</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">lighten</span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/seamless-backgrounds-symmetrical-patterns-pastel-colors-1630371079" target="_blank">Pattern idea</a><a href="https://www.colourlovers.com/palette/697327/Peeling_a_Violet" target="_black">Palette</a></footer>
</article>
<article class="item grid" data-size="305">
<h4>Blue and gold cloth</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c15" type="checkbox"/>
<label for="c15">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--b</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">#0c0922</span> <span class="token--len">0%</span> <span class="token--len">25%</span><span class="token--punc">,</span> <span class="token--col">#fff</span> <span class="token--len">0%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#f88f22</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#83a1f3</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#35627f</span> <span class="token--len">0%</span> <span class="token--len">75%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f5d07d</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">3em</span><span class="token--sep">/</span> <span class="token--len">12em</span> <span class="token--len">12em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">12px</span> <span class="token--len">4px</span><span class="token--sep">/</span> <span class="token--len">1em</span> <span class="token--len">1em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">6em</span> <span class="token--len">6em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">225deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--b</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">6em</span> <span class="token--len">6em</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">darken</span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/trendy-seamless-pattern-designs-texture-dots-1242798334" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="370">
<h4>Rainbow sweater</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c16" type="checkbox"/>
<label for="c16">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">49%</span><span class="token--punc">,</span> <span class="token--col">#000</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">51%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">--s</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">3.441em</span> <span class="token--len">4.915em</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">55deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">-55deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">35deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#f2eed5</span> <span class="token--len">0%</span> <span class="token--ang">110deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">1.7205em</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--s</span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#e27b38</span> <span class="token--ang">20%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#48a6a8</span> <span class="token--len">0%</span> <span class="token--ang">40%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#e8b838</span> <span class="token--len">0%</span> <span class="token--ang">60%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#de3c37</span> <span class="token--len">0%</span> <span class="token--ang">80%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#8b9d47</span> <span class="token--len">0%</span></span></span><span class="token--punc">)</span> <span class="token--len">1.7205em</span> <span class="token--len">-2.4575em</span><span class="token--sep">/</span> <span class="token--len">1%</span> <span class="token--len">24.575em</span></span></span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/rhombus-seamless-pattern-103721588" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="210">
<h4>Purple mesh</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c17" type="checkbox"/>
<label for="c17">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--col">purple</span> <span class="token--len">0</span> <span class="token--len">2px</span><span class="token--punc">,</span></span> <span class="token--val"><span class="token--col">transparent</span> <span class="token--len">0</span> <span class="token--len">4px</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">from</span> <span class="token--ang">45deg</span></span><span class="token--punc">,</span><span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#eee</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">1px</span> <span class="token--len">1px</span><span class="token--sep">/</span> <span class="token--len">40px</span> <span class="token--len">40px</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">90deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span></span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/background-purple-seamless-pattern-elements-geometric-178498601" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="355">
<h4>Menzies tartan: black and yellow</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c18" type="checkbox"/>
<label for="c18">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">65%</span><span class="token--punc">,</span> <span class="token--col">#ccad77</span> <span class="token--len">25%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">50%</span><span class="token--punc">,</span> <span class="token--col">#000</span> <span class="token--len">0%</span> <span class="token--len">75%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">0%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">50%</span></span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">35%</span></span> <span class="token--arg"><span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">35%</span> <span class="token--len">65%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#cbaa03</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">transparent</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#cbaa03</span> <span class="token--len">0</span> <span class="token--len">5.66px</span></span></span><span class="token--punc">)</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-size</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">6em</span> <span class="token--len">6em</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">lighten</span><span class="token--punc">,</span> <span class="token--keyw">darken</span><span class="token--punc">,</span> <span class="token--keyw">difference</span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/menzies-tartan-black-yellow-kilt-skirt-731703037" target="_blank">Pattern idea</a></footer>
</article>
<article class="item grid" data-size="365">
<h4>Tartan blues</h4>
<div class="wrap">
<div class="view"></div>
</div>
<input id="c19" type="checkbox"/>
<label for="c19">Show code</label>
<pre class="code"><span class="token--decl"><span class="token--prop">--l</span><span class="token--punc">:</span> <span class="token--val"><span class="token--len">25%</span><span class="token--punc">,</span> <span class="token--col">transparent</span> <span class="token--len">0%</span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background</span><span class="token--punc">:</span> <span class="token--val"><span class="token--list"><span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">6em</span> <span class="token--len">2em</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">2em</span> <span class="token--len">2em</span><span class="token--sep">/</span> <span class="token--len">8em</span> <span class="token--len">8em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--keyw">at</span> <span class="token--len">2em</span> <span class="token--len">6em</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#7cc5fc</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">4em</span><span class="token--sep">/</span> <span class="token--len">8em</span> <span class="token--len">8em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#1b3160</span> <span class="token--func">var</span><span class="token--punc">(</span><span class="token--arg token--prop">--l</span><span class="token--punc">)</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-conic-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--col">#7cc5fc</span> <span class="token--len">0%</span> <span class="token--len">25%</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#1b3160</span> <span class="token--len">0%</span> <span class="token--len">50%</span></span></span><span class="token--punc">)</span> <span class="token--len">0</span> <span class="token--len">0</span><span class="token--sep">/</span> <span class="token--len">4em</span> <span class="token--len">4em</span></span><span class="token--punc">,</span> <span class="token--item"><span class="token--func">repeating-linear-gradient</span><span class="token--punc">(</span><span class="token--args"><span class="token--arg"><span class="token--ang">45deg</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#fff</span> <span class="token--len">0</span> <span class="token--len">2.83px</span></span><span class="token--punc">,</span> <span class="token--arg"><span class="token--col">#000</span> <span class="token--len">0</span> <span class="token--len">5.66px</span></span></span><span class="token--punc">)</span></span></span></span><span class="token--punc">;</span></span><span class="token--decl"><span class="token--prop">background-blend-mode</span><span class="token--punc">:</span> <span class="token--val"><span class="token--keyw">lighten</span><span class="token--punc">,</span> <span class="token--keyw">darken</span><span class="token--punc">,</span> <span class="token--keyw">normal</span></span></span></pre>
<footer><a href="https://www.shutterstock.com/image-vector/tartan-seamless-pattern-trendy-illustration-wallpapers-403422859" target="_blank">Pattern idea</a></footer>
</article>
</main>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink