ჩრდილების (Box Shadow) გენერატორი

გადაათრიეთ სლაიდერები box-shadow-ს შესაქმნელად, დაადეთ ფენები სიღრმისთვის და დააკოპირეთ მზა CSS მომენტალურად.

ჩრდილის ფენები
ფენა 1
CSS
დაარეგულირეთ სლაიდერები ჩრდილის ფორმირებისთვის.

ყოველი ჩრდილი მუშავდება თქვენს ბრაუზერში. თქვენ მიერ მითითებული მონაცემები BroBroGo-ზე არ იტვირთება.

ხშირად დასმული კითხვები

რას მართავს წანაცვლება, დრესვა და გავრცელება?

წანაცვლება (offset) ჩრდილს გადააადგილებს მარცხნივ/მარჯვნივ და ზემოთ/ქვემოთ, დრესვა (blur) არბილებს მის კიდეებს, ხოლო გავრცელება (spread) ზრდის ან ამცირებს მას დრესვამდე. უარყოფითი გავრცელება ჩრდილს შიგნით სწევს, რაც სასარგებლოა მჭიდრო, ახლო ჩრდილებისთვის.

რას აკეთებს inset ოფცია?

ჩვეულებრივი ჩრდილი ელემენტის გარეთ ეცემა, როგორც სინათლე აწეული ბარათის უკან. Inset კი მას შიგნით აბრუნებს, რის გამოც ელემენტი ჩაწნეხილი ჩანს — ეს მოსახერხებელია ჩაღრმავებული ველებისა თუ დაჭერილი ღილაკებისთვის.

რატომ უნდა გამოვიყენო ჩრდილის რამდენიმე ფენა?

ერთი ჩრდილი გარკვეული ზომის შემდეგ ბრტყლად გამოიყურება. რეალური სიღრმის ეფექტი ხშირად აერთიანებს მკვეთრ, მუქ ჩრდილს რბილ და უფრო ფართო ჩრდილთან — დაამატეთ მეორე ფენა და დაარეგულირეთ თითოეული დამოუკიდებლად ამ ეფექტის მისაღებად.

CSS Cubic Bezier გენერატორიგადაათრიეთ ორი სახელური ანიმაციის მრუდის შესაქმნელად, დააკვირდით მოძრაობას წრფივ ანიმაციასთან შედარებით და დააკოპირეთ cubic-bezier() მნიშვნელობა.გრადიენტების გენერატორიშექმენით წრფივი, რადიალური ან კონუსური გრადიენტი, დაამატეთ ფერის წერტილები, მიუთითეთ მიმართულება და დააკოპირეთ CSS ერთი დაწკაპუნებით.კუთხეების მომრგვალების (Border Radius) გენერატორიმოამრგვალეთ თითოეული კუთხე სლაიდერებით, შექმენით ორგანული ფორმები ელიფსური რეჟიმით და დააკოპირეთ CSS მომენტალურად.Flexbox გენერატორიშექმენით flex კონტეინერი და მისი ელემენტები ვიზუალური მართვის საშუალებით, დააკვირდით ცვლილებებს რეალურ დროში და დააკოპირეთ CSS ერთი დაწკაპუნებით.CSS Grid გენერატორიგანსაზღვრეთ სვეტები და სტრიქონები, გადაათრიეთ კურსორი უჯრედებზე ელემენტების განსათავსებლად და დააკოპირეთ grid CSS შესაბამის HTML-თან ერთად ერთი დაწკაპუნებით.CSS clamp() კალკულატორიმიუთითეთ ზომა მცირე და დიდი ეკრანებისთვის და მიიღეთ დინამიკური clamp() მნიშვნელობა, რომელიც თანაბრად იცვლება მათ შორის — შრიფტებისთვის, padding-ებისთვის, margin-ებისთვის ან gap-ებისთვის.ფერების კონვერტერიგადაიყვანეთ ფერები HEX, RGB, HSL, HSV, CMYK და LAB ფორმატებს შორის — შეცვალეთ ნებისმიერი ველი და დანარჩენი ავტომატურად განახლდება.CSS Beautifier & Minifierგაასწორეთ არეული CSS მარტივი წაკითხვისთვის, ან მინიფიცირეთ იგი გასაშვებად — უსაფრთხო რეჟიმით, რომელიც არასოდეს ცვლის თქვენი წესების თანმიმდევრობას.კონტრასტის შემმოწმებელიშეიყვანეთ ტექსტისა და ფონის ფერები WCAG კონტრასტის კოეფიციენტისა და AA/AAA შესაბამისობის შესამოწმებლად.