Генератор на CSS box-shadow
Създавайте многопластови CSS box-shadow с живи плъзгачи за отместване, размазване, разпространение, цвят, непрозрачност и вмъкване — визуализирайте на реален елемент и копирайте готов CSS моментално.
box-shadow: —;
Всичко се актуализира в реално време в браузъра ви — без качвания, без регистрация, напълно безплатно.
За Генератор на CSS box-shadow
CSS генератор на сенки (box-shadow) ви позволява да проектирате box-shadow визуално, вместо да гадаете стойности в кода. Плъзгайте плъзгачите за хоризонтално и вертикално отместване, радиус на замъгляване, радиус на разпростиране, цвят и прозрачност — с превключвател за вътрешна сянка (inset) — и наблюдавайте как реален елемент се обновява на живо. Когато изглежда добре, копирайте готовия за поставяне CSS с едно кликване.
Модерните сенки за интерфейс рядко са един слой. Този генератор поддържа наслагвани слоеве от сенки: добавяйте, дублирайте, скривайте или премахвайте слоеве, и преглеждайте или само избрания слой, или всички слоеве заедно. Наслагването на плътна тъмна сянка под мека широка сянка е начинът, по който полираните карти и бутони получават своята дълбочина.
Можете също да стилизирате самия елемент за преглед — цвят на кутията, радиус на ъглите и фон на платното — така че сянката да се оценява в реалистичен контекст, включително тъмни повърхности. Започнете от готова стойност (preset), натиснете „Разбъркай слоя“ за вдъхновение и нулирайте, когато искате чист старт. Всичко се изпълнява във вашия браузър.
Как да използвате Генератор на CSS box-shadow
- Настройте плъзгачите за хоризонтално отместване, вертикално отместване, замъгляване, разпростиране, цвят и прозрачност, и включете „Вътрешна сянка“, ако искате вътрешна сянка.
- Кликнете „Добави слой“ или „Дублирай слой“, за да наслагвате сенки, и превключвайте режима на преглед между „Този слой“ и „Всички слоеве“, за да прецизирате всеки от тях.
- Настройте елемента и платното — цвят на кутията, радиус на ъглите и фон — така че прегледът да съответства на реалния ви дизайн.
- Приложете готова стойност или използвайте „Разбъркай слоя“, ако искате начална точка вместо празен набор от плъзгачи.
- Копирайте пълното CSS правило (или само стойността) и го поставете в стиловия си файл.