Warsztat gradientów CSS

<main class="gradient"><section id="gradient-stage"><span>Gradient CSS</span><h1>Wybierz<br>kolory.</h1><output id="angle-preview">125°</output></section><section class="gradient-controls"><div class="two"><div><label for="gradient-a">Początek</label><input id="gradient-a" type="color" value="#33479f"></div><div><label for="gradient-b">Koniec</label><input id="gradient-b" type="color" value="#cf4e76"></div></div><label for="gradient-angle">Kąt: <span id="angle-label">125°</span></label><input id="gradient-angle" type="range" min="0" max="360" value="125"><label for="gradient-preset">Paleta</label><select id="gradient-preset"><option value="orchid">Granat i róż</option><option value="sea">Morska zieleń</option><option value="sunset">Zachód słońca</option></select><label for="gradient-code" class="code-label">Kod CSS</label><textarea id="gradient-code" rows="3" readonly spellcheck="false"></textarea><button id="select-code" type="button">Zaznacz kod</button><p id="status" class="status" role="status"></p></section></main>

*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;font:16px/1.45 system-ui,sans-serif;display:grid;align-content:center;color:#17212e;background:#f5f7fb}main{width:min(100%,850px);margin:auto}h1,h2,p{margin:0 0 16px}h1{font-size:clamp(26px,4vw,42px);line-height:1.1}h2{font-size:21px}label{display:block;font-weight:600;margin-bottom:6px}input,select,textarea,button{font:inherit;max-width:100%}input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=color]),select,textarea{width:100%;padding:10px 12px;background:#fff;color:#17212e;border:1px solid #748091;min-height:44px;border-radius:0}textarea{resize:vertical}button{min-height:44px;padding:10px 18px;border:1px solid currentColor;background:#17212e;color:white;cursor:pointer;border-radius:0}button:hover{filter:brightness(1.15)}button:disabled{cursor:default;opacity:.55}button.secondary{background:transparent;color:inherit}input[type=radio],input[type=checkbox]{width:20px;height:20px;vertical-align:middle;accent-color:var(--accent,#3155c7)}input[type=range]{width:100%;accent-color:var(--accent,#3155c7);min-height:32px}input[type=color]{width:100%;min-height:52px;cursor:pointer;background:transparent;border:1px solid currentColor}fieldset{border:0;padding:0;margin:0}legend{font-weight:600;margin-bottom:12px}output{display:block}small,.note{font-size:13px}p.note{margin:10px 0 0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent,#3155c7);outline-offset:3px}[hidden]{display:none!important}.field{margin-bottom:16px}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.status{min-height:24px;margin-top:14px;font-weight:600;overflow-wrap:anywhere}.muted{color:#4b5868}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:560px){body{padding:18px}.two{grid-template-columns:1fr}h1{font-size:29px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body{background:#f3f2fb;color:#34305a;--accent:#674696}.gradient{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}#gradient-stage{padding:28px;display:flex;flex-direction:column;justify-content:space-between;min-height:355px;color:#fff}#gradient-stage h1{font:60px/.95 Georgia,serif;background:#1d1b3ce8;align-self:flex-start;padding:8px 10px}#gradient-stage>span{font-size:14px;background:#1d1b3ce8;align-self:flex-start;padding:5px 9px}#angle-preview{font:35px Georgia,serif;background:#1d1b3ce8;align-self:flex-start;padding:3px 10px}.gradient-controls .two{gap:12px;margin-bottom:18px}.gradient-controls label{font-size:14px}.gradient-controls select{margin-top:3px}.code-label{margin-top:18px}#gradient-code{font-size:12px;resize:none;margin-bottom:10px}.gradient button{background:#674696}@media(max-width:560px){.gradient{grid-template-columns:1fr;gap:20px}#gradient-stage{min-height:200px}#gradient-stage h1{font-size:42px}.gradient-controls .two{grid-template-columns:1fr 1fr}}

(()=>{const q=s=>document.querySelector(s);const all=s=>[...document.querySelectorAll(s)];const update=()=>{const angle=q('#gradient-angle').value,a=q('#gradient-a').value,b=q('#gradient-b').value,gradient=`linear-gradient(${angle}deg, ${a}, ${b})`;q('#gradient-stage').style.background=gradient;q('#angle-label').textContent=angle+'°';q('#angle-preview').textContent=angle+'°';q('#gradient-code').value='background: '+gradient+';';q('#status').textContent=''};all('#gradient-a,#gradient-b,#gradient-angle').forEach(e=>e.oninput=update);q('#gradient-preset').onchange=()=>{const pairs={orchid:['#33479f','#cf4e76'],sea:['#064b52','#388578'],sunset:['#a9343a','#a87626']};const pair=pairs[q('#gradient-preset').value];q('#gradient-a').value=pair[0];q('#gradient-b').value=pair[1];update()};q('#select-code').onclick=()=>{q('#gradient-code').focus();q('#gradient-code').select();q('#status').textContent='Kod zaznaczony. Skopiuj go skrótem Ctrl+C lub Cmd+C.'};update();})();