Генератор на Box Shadow

Плъзгайте регулаторите, за да оформите box-shadow, наслагвайте слоеве за дълбочина и копирайте готовия CSS веднага.

Слоеве сенки
Слой 1
CSS
Регулирайте плъзгачите, за да оформите сянката си.

Всяка сянка се рендерира във Вашия браузър. Нищо от това, което настройвате тук, не се изпраща към BroBroGo.

ЧЗВ

Какво всъщност контролират offset, blur и spread?

Отместването (offset) движи сянката наляво/надясно и нагоре/надолу, размазването (blur) омекотява краищата ѝ, а разпространението (spread) я увеличава или свива преди размазването. Отрицателното разпространение свива сянката навътре, което е полезно за плътна, близка сянка.

Какво прави опцията inset?

Нормалната сянка пада извън елемента, подобно на светлина зад изпъкнала карта. Опцията „Inset“ я обръща навътре, така че елементът изглежда хлътнал — удобно за вдлъбнати полета за въвеждане или натиснати бутони.

Защо да наслагваме повече от един слой сенки?

Единичната сянка изглежда плоска над определен размер. Реалната дълбочина обикновено съчетава тясна, тъмна сянка с мека и по-широка такава — добавете втори слой и настройте всеки независимо, за да постигнете този ефект.

CSS Cubic Bezier ГенераторПлъзнете двете дръжки, за да оформите крива на ускорение, наблюдавайте движението на точката спрямо постоянна скорост и копирайте cubic-bezier() стойността.Генератор на градиентиСъздайте линеен, радиален или коничен градиент, добавете цветни точки, задайте посоката и копирайте готовия CSS с едно щракване.Генератор на Border RadiusЗаобляйте всеки ъгъл с плъзгачи, оформяйте органични петна с елиптичния режим и копирайте CSS кода мигновено.Генератор на FlexboxНастройте flex контейнер и неговите елементи с визуални контроли, наблюдавайте промените в реално време и копирайте CSS кода с едно щракване.CSS Grid ГенераторНастройте Вашите колони и редове, плъзнете по клетките, за да разположите елементи, и копирайте CSS кода с подходящ HTML с едно щракване.CSS clamp() КалкулаторВъведете размер за малки и големи екрани и получете адаптивна clamp() стойност, която се мащабира плавно между тях — за шрифтове, отстояния, маржове или празнини.Цветови конверторКонвертирайте цветове между HEX, RGB, HSL, HSV, CMYK и LAB — редактирайте едно поле и останалите се обновяват в реално време.CSS форматиране и минифициранеПренаредете разхвърляния CSS за лесно четене или го минифицирайте за по-бързо зареждане — с безопасен режим, който никога не променя реда на правилата Ви.Проверка на контрастаВъведете цвят на текста и фона, за да видите съотношението на контраста по WCAG и кои нива AA и AAA се покриват.