Gradientu ģenerators

Izveidojiet lineāru, radiālu vai konisku gradientu, pievienojiet krāsu punktus, iestatiet virzienu un nokopējiet CSS ar vienu klikšķi.

Gradienta veids
Krāsu punkti
CSS
Pielāgojiet punktus un virzienu, lai veidotu savu gradientu.

Katrs gradients tiek renderēts tieši jūsu pārlūkprogrammā. Nekas no tā, ko šeit iestatāt, netiek augšupielādēts BroBroGo.

BUJ

Kāda ir atšķirība starp lineāru, radiālu un konisku gradientu?

Lineārs gradients (linear) sajauc krāsas pa taisnu līniju, kuru virzāt ar leņķi. Radiāls gradients (radial) izplata tās uz āru no centra aplī vai elipsē. Konisks gradients (conic) griež tās ap centru kā krāsu apli.

Kas ir krāsu punkti (color stops)?

Katrs krāsu punkts (color stop) ir krāsa, kas piesaistīta noteiktai pozīcijai gar gradientu — 0% sākumā, 100% beigās. Pārvietojiet punktu, lai mainītu vietu, kur tā krāsa sasniedz maksimumu, vai pievienojiet vairāk punktu bagātīgākam sajaukumam. Varat izmantot līdz astoņiem punktiem.

Kā es varu kontrolēt virzienu?

Lineāram vai koniskam gradientam leņķa slīdnis iestata virzienu — 0° norāda uz augšu, 90° norāda pa labi. Radiālam gradientam nav leņķa; tā vietā izvēlieties apļa vai elipses formu, lai mainītu tā izplatīšanos.

CSS Cubic Bezier ģeneratorsVelciet abus rokturus, lai veidotu paātrinājuma līkni, vērojiet punkta kustību pret vienmērīgu kustību un nokopējiet cubic-bezier() vērtību.Box Shadow ģeneratorsVelciet slīdņus, lai veidotu box-shadow ēnu, klājiet slāņus dziļumam un acumirklī nokopējiet gatavo CSS.Border Radius ģeneratorsNoapaļojiet katru stūri ar slīdņiem, veidojiet organiskas lāses formas ar eliptisko režīmu un acumirklī nokopējiet CSS.Flexbox ģeneratorsIestatiet flex konteineru un tā elementus ar vizuālām vadīklām, vērojiet izkārtojuma reakciju reāllaikā un nokopējiet CSS ar vienu klikšķi.CSS Grid ģeneratorsIestatiet kolonnas un rindas, velciet pāri šūnām, lai izvietotu elementus, un ar vienu klikšķi nokopējiet režģa CSS kopā ar atbilstošo HTML.CSS clamp() kalkulatorsIevadiet izmēru maziem un lieliem ekrāniem un iegūstiet plūstošu clamp() vērtību, kas vienmērīgi mērogojas starp tiem — fontu izmēriem, iekšējām un ārējām malām vai spraugām.Krāsu konvertētājsKonvertējiet krāsas starp HEX, RGB, HSL, HSV, CMYK un LAB — rediģējiet jebkuru lauku, un pārējie tiks atjaunināti reāllaikā.CSS sakārtotājs un minimizētājsSakārtojiet nekārtīgu CSS, lai to būtu vieglāk lasīt, vai minimizējiet to publicēšanai — ar drošu režīmu, kas nekad nemaina kārtulu secību.Kontrasta pārbaudītājsIevadiet teksta un fona krāsu, lai redzētu WCAG kontrasta attiecību un uzzinātu, kuri AA un AAA līmeņi atbilst prasībām.