Box Shadow generaator

Lohistage liugureid box-shadow kujundamiseks, lisage sügavuse saavutamiseks kihte ja kopeerige valmis CSS kohe.

Varju kihid
Kiht 1
CSS
Reguleerige liugureid varju kujundamiseks.

Iga vari renderdatakse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse.

KKK

Mida nihe, hajutus ja ulatus tegelikult juhivad?

Nihe (offset) liigutab varju vasakule/paremale ja üles/alla, hajutus (blur) pehmendab selle servi ning ulatus (spread) kasvatab või kahandab seda enne hajutamist. Negatiivne ulatus tõmbab varju sissepoole, mis on kasulik tiheda ja lähedase varju loomiseks.

Mida teeb valik „inset“?

Tavaline vari langeb elemendist väljapoole, nagu valgus tõstetud kaardi taga. Inset (seesmine vari) keerab selle hoopis sissepoole, mistõtku element näib sissevajutatud – mugav süvendatud sisestusväljade või vajutatud nuppude jaoks.

Miks kasutada mitut varjukihti?

Üksik vari mõjub teatud suurusest alates lamedalt. Tõeline sügavus saavutatakse tavaliselt kitsa tumeda varju ja pehme laiema varju kombineerimisel – lisage teine kiht ja häälestage mõlemat eraldi, et saavutada soovitud efekt.

CSS Cubic Bezier generaatorLohistage kahte pidet üleminekukõvera kujundamiseks, vaadake punkti liikumist võrdluses ühtlase liikumisega ja kopeerige cubic-bezier() väärtus.Gradiendi generaatorLooge lineaarseid, radiaalseid või koonilisi gradiente, lisage värvipunkte ja määrake suund ning kopeerige CSS ühe klõpsuga.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.