Gradiendi generaator

Looge lineaarseid, radiaalseid või koonilisi gradiente, lisage värvipunkte ja määrake suund ning kopeerige CSS ühe klõpsuga.

Gradiendi tüüp
Värvipunktid
CSS
Reguleerige punkte ja suunda gradiendi kujundamiseks.

Iga gradient renderdatakse otse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse.

KKK

Mis vahe on lineaarsel, radiaalsel ja koonilisel gradiendil?

Lineaarne gradient (linear-gradient) sulandab värve piki sirget, mida suunate nurgaga. Radiaalne gradient (radial-gradient) levitab neid keskkohast väljapoole ringi või ellipsina. Kooniline gradient (conic-gradient) pühib neid ümber keskpunkti nagu värviratas.

Mis on värvipunktid?

Iga värvipunkt (color stop) on kindlale positsioonile kinnitatud värv piki gradienti — 0% alguses, 100% lõpus. Liigutage punkti, et nihutada selle värvi tipphetke, või lisage rohkem punkte rikkalikuma sulandumise saavutamiseks. Kasutada saab kuni kaheksat värvipunkti.

Kuidas juhtida gradiendi suunda?

Lineaarse või koonilise gradiendi puhul määrab nurga liugur suuna — 0° osutab üles, 90° paremale. Radiaalsel gradiendil nurka pole; selle leviku muutmiseks valige selle asemel ringi (circle) või ellipsi (ellipse) kujund.

CSS Cubic Bezier generaatorLohistage kahte pidet üleminekukõvera kujundamiseks, vaadake punkti liikumist võrdluses ühtlase liikumisega ja kopeerige cubic-bezier() väärtus.Box Shadow generaatorLohistage liugureid box-shadow kujundamiseks, lisage sügavuse saavutamiseks kihte ja kopeerige valmis CSS kohe.Border Radiuse generaatorÜmardage iga nurka liuguritega, kujundage orgaanilisi mulle elliptilise režiimiga ja kopeerige CSS kohe.Flexboxi generaatorSeadistage flex-konteiner ja selle elemendid visuaalsete juhtnuppudega, vaadake paigutuse reageerimist reaalajas ja kopeerige CSS ühe klõpsuga.CSS Gridi generaatorMäärake veerud ja read, lohistage üle lahtrite elementide paigutamiseks ning kopeerige griddi CSS koos sobiva HTML-iga ühe klõpsuga.CSS clamp() kalkulaatorSisestage suurus väikeste ja suurte ekraanide jaoks ning saate sujuvalt skaleeruva clamp() väärtuse fondi suuruste, paddingute, marginite või gapide jaoks.VärvikonverterTeisendage värve HEX, RGB, HSL, HSV, CMYK ja LAB vahel — muutke mistahes välja ja ülejäänud uuenevad reaalajas.CSS-i kujundaja ja minimeerijaTaandage sassis CSS-i, et seda oleks lihtne lugeda, või minimeerige seda avaldamiseks – turvalise režiimiga, mis ei muuda kunagi reeglite järjekorda.Kontrastsuse kontrollijaSisestage teksti- ja taustavärv, et näha WCAG kontrastsuse suhet ja seda, millised AA ja AAA tasemed on läbitud.