CSS գեներատոր

CSS ստվերի գեներատոր

Տեսողականորեն կարգավորեք box-shadow և text-shadow ստվերները, միավորեք շերտերը և պատճենեք պատրաստ CSS-ը։

Ստվերի շերտեր

Ստվերի կարգավորումներ

Նախընտրանքներ

Կենդանի նախադիտում

Նախադիտման տեսք

Ստեղծված CSS

.shadow-box {
  box-shadow: 0px 18px 40px -12px rgba(99, 102, 241, 0.55);
}

Հասկացեք CSS ստվերի արժեքները

box-shadow-ը կազմվում է հորիզոնական և ուղղահայաց շեղումներից, լղոզման ու տարածման շառավիղներից, գույնից և ոչ պարտադիր inset բառից։ text-shadow-ը օգտագործում է շեղումներ, լղոզում և գույն։ Կարգավորումները միանգամից թարմացնում են ամբողջ CSS հայտարարությունը։

Ստեղծեք խորություն մի քանի շերտով

Մի քանի նուրբ ստվեր սովորաբար ավելի բնական է թվում, քան մեկ ծանր ստվերը։ Միավորեք մոտ մուգ շերտը՝ հպման էֆեկտի համար, և ավելի լայն փափուկ շերտը՝ բարձրության համար, կամ դասավորեք գունավոր շերտեր՝ լուսարձակ ստանալու համար։

Նախադիտումից մինչև պատրաստ CSS

Ընտրեք box-shadow կամ text-shadow, սկսեք պատրաստի տարբերակից, ապա ճշգրտեք դիրքը, լղոզումը, տարածումը, թափանցիկությունը, շառավիղը և նախադիտման գույները։ Պատճենեք CSS-ը և ստուգեք այն նախագծի իրական ֆոնի վրա։

Սովորեք և շարունակեք կառուցել

Օգնեք բարելավել այս գործիքը

Գործիքն աշխատե՞ց այնպես, ինչպես ակնկալում էիք

Ուղարկեք կարճ հաղորդագրություն՝ սքրինշոթով կամ օրինակ ֆայլով։ Գործիքի անունը կլրացվի ավտոմատ։