![image](https://habrastorage.org/webt/7q/jt/m8/7qjtm8gjpusglkqv6po6hetolmc.jpeg)
CSS генераторы экономят время и сокращают количество ошибок в коде. Они позволяют автоматизировать многие задачи, которые опытным верстальщикам или фронтендерам уже кажутся скучными. В то же время, они могут облегчить работу над задачами, которые сложны для начинающих специалистов.
Схема работы таких генераторов проста: достаточно ввести через простой визуальный интерфейс нужные вам параметры и на выходе получить готовые CSS-стили. Далее полученный код нужно скопировать и добавить в свой проект.
Известный full-stack разработчик Марко Денич предлагает свою подборку лучших CSS-генераторов. Возможно, о каких-то из них вы не знали, и, познакомившись с ними сейчас, начнёте использовать в работе.
1. Neumorphism/Soft UI generator
Neumorphism позволяет создавать градиенты и тени. Кроме того, с ним легко подобрать и сгенерировать цвета для вашего сайта.
Подробнее
![](https://habrastorage.org/webt/n4/ge/z0/n4gez0hzrmch6jp3a3llx-un0fw.png)
2. Smooth Shadow generator
Это генератор теней, позволяющий через удобный UI менять параметры свойства box-shadow. В CSS3 свойство box-shadow отвечает за эффекты тени, которые возможны для большинства элементов веб-страницы. Инструмент, в частности, позволяет настраивать такие параметры, как вертикальное смещение, размытие, растяжение и прозрачность.
Подробнее
![](https://habrastorage.org/webt/pk/ta/ol/pktaolg7hdp-n6xxkin3fo4u3mu.png)
3. Fancy Border Radius Generator
Генератор позволяет рисовать сложные фигуры с закруглёнными углами. На выходе мы получаем набор значений свойства border-radius.
Подробнее
![](https://habrastorage.org/webt/3i/wm/ex/3iwmexjcabvrk0xcam3b4b1ji1o.png)
4. Easing Gradients
Позволяет создавать нелинейные градиенты и использовать модифицированные цветовые пространства.
Подробнее
![](https://habrastorage.org/webt/gl/sl/dc/glsldcdrnxfm3i6llx9nmega-sc.png)
5. Data Viz Color Palette Generator
Особенно хочется отметить, что с его помощью можно создавать гармоничные цветовые палитры с произвольным количеством базовых цветов. Инструмент имеет удобный визуальный интерфейс с множеством настроек.
Подробнее
![](https://habrastorage.org/webt/j6/zm/h9/j6zmh9bzz2semi2lokdmpy90fqy.png)
6. CSS Grid Generator
Визуальный интерфейс очень простой, поэтому быстро накидать сетку не составит труда. Помимо таких базовых функций, как ввод количества строк, столбцов и отступов, есть возможность перетаскивать в ячейки div-блоки.
Подробнее
![](https://habrastorage.org/webt/bh/ac/nq/bhacnqu4zfkuocxrtehxzuvuioe.jpeg)
7. CSS Accordion Slider Generator
Бесплатный онлайн-сервис, позволяющий настроить через UI и сгенерировать горизонтальные и вертикальные аккордеон-слайдеры на HTML и CSS, без использования javaScript.
Подробнее
![](https://habrastorage.org/webt/16/i7/mh/16i7mhzgyd_fkr5ggnnnrj50ijw.png)
8. CSS clip-path maker
Простой онлайн-инструмент для обрезки картинок по заданному трафарету.
Подробнее
![](https://habrastorage.org/webt/cc/4t/8g/cc4t8gfwmqmoykstxi2nxbja-6y.png)
9. Get Waves
Генератор создает svg-вектор с заливкой волнообразной формы. Форму волны можно выбирать из трёх вариантов — синусоидальная, прямоугольная и пилообразная.
Также можно указывать размер волны и направление. В инструмент встроен рандомайзер, который выдаёт волны со случайными размерами, но с сохранением выбранной формы.
Подробнее
![](https://habrastorage.org/webt/tm/yu/le/tmyulequcy91s__qfebsvdfrjoi.jpeg)
Согласны ли вы с выбором автора? Какие CSS-генераторы нравятся вам?
На правах рекламы
Эпичные серверы для размещения сайтов и не только! Быстрые VDS на базе новейших процессоров AMD EPYC и NVMe хранилища для размещения проектов любой сложности, от корпоративных сетей и игровых проектов до лендингов и VPN.
![](https://habrastorage.org/webt/8p/3v/z4/8p3vz47nluspfyc0axlkx88gdua.png)
RozetkaOtUnitaza
Вот с гридом очень удобно выходит, спасибо.