0

CSS gradiento generatorius

Kurkite CSS gradientus vizualiai: linijinį, radialinį ar kūginį tipą, kampo slankiklį ir iki šešių spalvų taškų su tiesiogine peržiūra per visą plotį ir kopijuojamu kodu.

🔒 Visiškai apdorojama jūsų naršyklėje – niekas, kurį čia įvedėte, niekada neįkeliama.

90°
Apdorojama... 0%

Rezultatas

Rašyti linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) ranka ir perkrauti puslapį, kad pamatytumėte rezultatą, yra lėtas ciklas. Šis generatorius jį užbaigia: pasirinkite linijinį, radialinį ar kūginį, vilkite kampo slankiklį, nustatykite kiekvieną spalvų tašką naudodami įprastą spalvų parinkiklį ir poziciją procentais – o peržiūra per visą plotį atsinaujina po kiekvieno įvedimo, o galutinė fono eilutė visada paruošta kopijuoti.

Trys gradiento tipai atlieka skirtingus uždavinius. Linijiniai gradientai blunka tam tikra kryptimi ir dažniausiai naudojami hero sekcijose bei mygtukuose; radialiniai gradientai spinduliuoja iš centro švytėjimui ir vinjetėms; kūginiai gradientai sukasi aplink centrą ir yra skritulinių diagramų bei spalvų ratų pagrindas. Bet kada galite perjungti tipus – jūsų taškai išlieka, todėl palyginti visus tris užtrunka vos kelias sekundes.

Iki šešių spalvų taškų suteikia erdvės kelių juostų dizainams, o šablonų puslapiuose pateikiami patikrinti deriniai – šiltas saulėlydis, ramus vandenynas ir švelni pastelinė pora – kaip atspirties taškai, kuriuos galite tobulinti, užuot pradėję nuo tuščios drobės. Atkreipkite dėmesį į užduočių pasiskirstymą: šios svetainės spalvų paletės generatorius parenka harmoningas grynas spalvas, o spalvų formato keitiklis paverčia reikšmę tarp HEX, RGB ir HSL, tuo tarpu šis įrankis atlieka kitą darbą – paverčia pasirinktas spalvas į paruoštą CSS gradiento kodą.

Viskas veikia lokaliai jūsų naršyklėje: jokių įkėlimų, jokios paskyros, jokių kreipimųsi į serverį, o įkeltas generatorius veikia ir be interneto.