CSS gradienta ģenerators

Kā lietot CSS gradienta ģeneratoru

1. Izvēlieties Gradienta veids: Lineārs, Radiāls vai Konisks. Lielais priekšskatījums augšpusē atjaunojas pēc katras izmaiņas.
2. Lineāram gradientam iestatiet Leņķis ar slīdni vai ierakstiet grādos (90° iet no kreisās uz labo, 180° no augšas uz leju). Koniskam gradientam leņķis ir vieta, kur sākas pagrieziens.
3. Radiāliem un koniskiem gradientiem pārvietojiet centru ar Centrs X un Centrs Y. Radiāls gradients var būt Aplis vai Elipse (izvēlne Forma).
4. Rediģējiet Krāsu pieturas. Noklikšķiniet jebkur uz joslas, lai tur pievienotu pieturu ar krāsu, kāda gradientam jau ir šajā punktā, vai izmantojiet Pievienot pieturu, lai aizpildītu lielāko atstarpi. Velciet turi, lai to pārvietotu. Katrai pieturai ir arī rinda, kur var izvēlēties krāsu, ierakstīt jebkuru CSS krāsu, iestatīt Pozīcija (%) vai Noņemt to (gradientam vienmēr paliek vismaz divas pieturas).
5. Pēc izvēles atzīmējiet Atkārtots, izvēlieties Krāsu interpolācija, noklikšķiniet uz Apgriezt, lai apgrieztu pieturu secību, vai uz Nejaušs gradients iedvesmai.
6. Ar Kopēt nokopējiet rezultātu no CSS kods.

Tastatūra: fokusējiet turi uz joslas, pēc tam ar bulttaustiņiem pārvietojiet to par 1 % (ar Shift – 10 %), ar Home un End pārlēkšanai uz galiem un ar Delete to noņemiet.

Trīs gradienta funkcijas

• linear-gradient() sajauc krāsas pa taisnu līniju. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) iet no indigo kreisajā pusē līdz rozā labajā. Leņķi tiek skaitīti pulksteņrādītāja virzienā no augšas: 0deg norāda uz augšu, 90deg uz labo pusi.
• radial-gradient() izstaro no centra punkta. radial-gradient(circle at 30% 40%, …) novieto centru 30 % no kreisās malas un 40 % no augšas. Elipse stiepjas līdzi lodziņam, aplis paliek apaļš.
• conic-gradient() slauka ap centru kā pulksteņa rādītāji. conic-gradient(from 0deg at 50% 50%, …) veido krāsu riteņus, sektoru diagrammas un griešanās efektus. Pieturu pozīcijas ir pilna apļa daļas.

Opcija Atkārtots izmanto repeating-linear-gradient() un tās radiniekus: ar jūsu pieturām definētais raksts atkārtojas, līdz lodziņš ir aizpildīts. Pēdējo pieturu novietojiet krietni zem 100 % (piemēram, pie 20 %), lai redzētu svītras vai gredzenus.

Divas pieturas vienā pozīcijā rada asu malu, nevis pāreju – tā veido svītras un karogus. Ģenerators kodā uztur pieturas sakārtotas pēc pozīcijas, kā to prasa CSS.

sRGB vai OKLCH interpolācija

Pēc noklusējuma pārlūkprogrammas gradienta krāsas sajauc sRGB telpā. Starp divām piesātinātām krāsām, piemēram, zilu un dzeltenu, tas bieži rada blāvu pelēku vai duļķainu vidu. CSS Color Level 4 ļauj izvēlēties interpolācijas telpu: linear-gradient(90deg in oklch, …) krāsas sajauc uztveres OKLCH telpā un saglabā spilgtu vidu.

Ar OKLCH (vienmērīgāk, ar sRGB rezerves variantu) rīks raksta divas background deklarācijas: vispirms klasisko sRGB versiju, pēc tam OKLCH versiju. Pārlūkprogrammas, kas atbalsta interpolācijas telpas (Chrome un Edge 111+, Safari 16.2+, Firefox 127+), izmanto otro rindu; vecākās to ignorē un paliek pie pirmās.

Padomi

• Laukos pieturām tiek pieņemtas krāsas ar caurspīdīgumu, piemēram, #00000080 vai rgb(0 0 0 / 50%), kas noder pārklājumiem uz attēliem.
• Kods tiek rakstīts ar background. Izmantojiet background-image, ja citas fona īpašības iestatāt atsevišķi.
• Smalki gradienti (divi tuvi vienas krāsas toņi) parasti izskatās profesionālāk nekā varavīksnes pārejas.