Настраивайте визуально и получайте готовый CSS код
Генератор градиентов и теней позволяет настраивать их визуально с помощью ползунков, видеть результат в реальном времени и копировать готовый CSS. Для градиента выберите два цвета и угол от 0 до 360 градусов, чтобы получить код linear-gradient. Для тени настройте смещение вниз, размытие, растяжение, интенсивность, цвет и скругление углов, наблюдая изменения на примере карточки. Четыре готовых пресета для легкой, обычной, выраженной и парящей тени дают хорошую отправную точку. Копирование кода тени также включает свойство border-radius. Это полезно для кнопок, карточек и первых экранов, а также для точного объяснения нейросетям желаемого внешнего вида.
На фоне первого экрана, на важных кнопках или выделенных карточках. Не стоит применять его по всему сайту, так как это утомляет глаза.
Вероятно, интенсивность слишком высока. Хорошая тень это та, которую почти не замечаешь. Попробуйте интенсивность от 10 до 20 процентов или используйте один из готовых пресетов.
В этом инструменте нельзя, здесь есть только начальный и конечный цвет. Промежуточный цвет можно добавить вручную прямо в код, вставив его между двумя цветами внутри linear-gradient.
Горизонтальное смещение зафиксировано на нуле, поэтому тень падает прямо вниз, как от верхнего освещения. Это стандартный вид для современных интерфейсов.
Отрицательное растяжение уменьшает тень до применения размытия. В результате она выглядывает только из-под карточки, а не со всех сторон. Три из четырех готовых пресетов используют этот прием.
Klix не загрузился
Сначала попробуйте обновить страницу. Если только что вышла новая версия, обновление решает это сразу.
Если обновление не помогло, возможно, ваш браузер слишком старый. Klix запускает инструменты на вашем устройстве, а не на сервере, поэтому ему нужен браузер 2022 года или новее. Что делать: обновите Chrome или Firefox и снова откройте klixtools.com.