🌈 Wonderful tools for creating secondary visual elements for your website
Tags: css, webdev, opensource, uiweekly
Published: 2021-10-11 12:00:59

## Introduction

Hey, DEV people! 👋

Here's a small selection of time-tested online tools that can seriously reduce the time it takes to develop a visual concept for your next website (and beyond). All tools will be aimed at creating secondary visual additions to the UI, such as **waves**, **blobs**, **patterns** and animated **backgrounds** & **gradients**.

> 👌 **Disclamer:** I usually don't care for articles in this style, but there are too many of these tools accumulated to do separate articles on each. So don't worry, I will continue to delight you with in-depth articles and not go off to “Top X”-like articles!

OK, here we go! 👇

<a name="toc"></a>
### 📝 Table of contents

- [Blobbb](#blobbb)
- [Animated Gradient Background Generator](#animated-gradient-background-generator)
- [SVG Shape Dividers Creator](#svg-shape-dividers-creator)
- [Wicked Backgrounds](#wicked-backgrounds)
- [Basic Pattern Repository](#basic-pattern-repository)
- [Figen](#figen)

<a name="#blobbb"></a>
## Blobbb

The [Blobbb](https://www.blobbb.fun/?utm_source=dev.to/koddr) project is an excellent example of the most convenient tool for creating random blobs with comprehensive settings.

![blobbb](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dx6140ljb3okhipydl8e.png)

There aren't many options, but that's really all you need:

- Fill color;
- Stroke color;
- Gradient color;
- Presets of patterns;

Example “copy-paste” output:

```html
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <path fill="#673ab7" d="M71.3,-23.4C80.9,6.4,69.3,42.9,44.3,61.1C19.4,79.2,-19,79,-36.2,63.3C-53.4,47.6,-49.4,16.4,-39.9,-13.4C-30.3,-43.1,-15.2,-71.5,7.8,-74C30.8,-76.6,61.7,-53.3,71.3,-23.4Z"  transform="translate(100 100)" />
</svg>
```

[↑ Table of contents](#toc)

<a name="#animated-gradient-background-generator"></a>
## Animated Gradient Background Generator

[Animated Gradient Background Generator](https://animated-gradient-background-generator.netlify.app/?utm_source=dev.to/koddr). The name of this tool speaks for itself. Completely based on CSS features, no JavaScript.

![animated gradient background generator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k07p3rk37xsy8hxi4o13.png)

Few options, but it's even good, as this animated background is much easier to implement in an existing website:

- Set of colors;
- Angle of color movement;
- Speed of animation;

Example “copy-paste” output:

```css
.gradient-background {
  background: linear-gradient(300deg,deepskyblue,darkviolet,blue);
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
```

[↑ Table of contents](#toc)

<a name="#svg-shape-dividers-creator"></a>
## SVG Shape Dividers Creator

[SVG Shape Dividers Creator](https://shapedividers.com/?utm_source=dev.to/koddr) is a really useful tool for generating content splitter waves (and more) for your website. It's based on plain CSS and can easily be built into any project.

![svg shape dividers creator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fckoi4lb2ufecfiu3kjv.png)

A huge number of options for you to choose from:

- Wave position & color;
- Short & Long axis;
- Animation duration;
- Support mobile and tablet in-app views;

And my favorite feature is over 35 free wave patterns like this one:

![wave patterns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j7sjyl0vzje8p2qhgag5.png)

Example “copy-paste” output:

```css
.shapedividers_com-9933 {
  overflow: hidden;
  position: relative;
}

.shapedividers_com-9933::before {
  content: '';
  font-family: 'shape divider from ShapeDividers.com';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw;
  background-size: 100% 90px;
  background-position: 50% 0%;
  background-image: url('data:image/svg+xml;
    charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23fbd8c2"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23fbd8c2"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23fbd8c2"/></svg>');
}

@media (min-width:2100px) {
  .shapedividers_com-9933::before {
    background-size: 100% calc(2vw + 90px);
  }
}
```

[↑ Table of contents](#toc)

<a name="#wicked-backgrounds"></a>
## Wicked Backgrounds

[Wicked Backgrounds](https://wickedbackgrounds.com/?utm_source=dev.to/koddr) is a tool for creating beautiful and fully customizable wavy SVG backgrounds. The authors did an impressive job on this online tool, so it has a nice design and UX.

![wicked backgrounds](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/riaglx6ccd91mooayfkj.png)

There are not as many options as I would have liked (for example, _I would still like to control the curvature of each of the waves_), but for most tasks this is enough:

- Wave count;
- Color with color mode;
- Angle of wave rotation;
- Randomize wave's shape;

Example “copy-paste” output:

```html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1920 1080">
  <rect width="1920" height="1080" fill="#000000">
  </rect>
  <g transform="matrix(1.15,0,0,1.15,-133.8815414428709,-81)">
    <path d="M0,-1080C-16.109467690272208,-987.3534782755676,-76.3233648777778,-696.694101273433,-96.65680614163324,-524.1208696534056C-116.99024740548867,-351.54763803337823,-154.87768348144857,-186.2317926518452,-122.0006475831326,-44.56061027983549C-89.12361168481664,97.11057209217424,79.74857135483008,205.34394482433856,100.6054092482625,325.9062245786526C121.46224714169493,446.46850433296663,9.837258542218564,527.7054581855967,3.1403797774619306,678.8130682460487C-3.5564989872947024,829.9206783065007,62.322865374741006,1081.166449881082,60.424136659722706,1232.5518849413647C58.525407944704405,1383.9373200016475,1.8186969306392573,1432.5509927646397,-8.25199251264786,1587.1256786077456C-18.322681955934975,1741.7003644508516,-1.37533208544131,2064.5209464346244,0,2160L 1920 2160 L 1920 -1080 Z" fill="url(&quot;#SvgjsLinearGradient1000&quot;)">
    </path>
    <path d="M320,-1080C316.5479274166343,-988.0283947909271,306.52547890189555,-735.2750389899924,299.28756449980597,-528.1703687455629C292.0496500977164,-321.0656985011334,261.21331693651325,-72.3552689085293,276.57251358746254,162.62802146657714C291.9317102384118,397.6113118416836,400.5251410555341,654.6011081064328,391.44274440550174,881.7293735050758C382.3603477554694,1108.857638903719,233.98525775485209,1312.352509442615,222.07813368726846,1525.3976138584358C210.17100961968484,1738.4427182742565,303.67968894787805,2054.232935643073,320,2160L 1920 2160 L 1920 -1080 Z" fill="url(&quot;#SvgjsLinearGradient1001&quot;)">
    </path>
    <path d="M640,-1080C649.4269886515594,-936.4225056950557,686.3731109342367,-488.6591163963009,696.5619319093564,-218.53503417033437C706.7507528844761,51.589048055632134,720.4152486002066,295.2526065023857,701.1329258507185,540.7444933557989C681.8506031012304,786.2363802092121,591.0568163875477,984.5403691761117,580.867995412428,1254.4162869501451C570.6791744373082,1524.2922047241786,630.1446659020713,2009.0693811583576,640,2160L 1920 2160 L 1920 -1080 Z" fill="url(&quot;#SvgjsLinearGradient1002&quot;)">
    </path>
    <path d="M960,-1080C972.2722028771731,-999.3689936463607,1044.1924579458341,-778.7088223996913,1033.6332172630384,-596.2139618781637C1023.0739765802426,-413.7191013566361,918.9245023444137,-189.21592185427187,896.6445559032254,14.96916312916585C874.3646094620372,219.15424811260357,899.6643029716962,467.86234802809037,899.9535386159089,628.8965480224628C900.2427742601216,789.9307480168352,904.6358103185602,827.5961407572682,898.3799697685013,981.1743630954002C892.1241292184424,1134.7525854335322,852.1484902769726,1353.8949425671544,862.4184953155557,1550.3658820512544C872.6885003541388,1746.8368215353544,943.7364158859259,2058.394313675209,960,2160L 1920 2160 L 1920 -1080 Z" fill="url(&quot;#SvgjsLinearGradient1003&quot;)">
    </path>
    <path d="M1280,-1080C1294.0939719360897,-1011.9782300101334,1355.3563163190304,-811.9909292764734,1364.5638316165382,-671.8693800608005C1373.771346914046,-531.7478308451276,1328.2045657020783,-382.7469685563632,1335.2450917850465,-239.27070470596277C1342.2856178680147,-95.79444085556233,1406.6454171746414,37.69214417447009,1406.8069881143476,188.98820304160216C1406.968559054054,340.28426190873427,1348.3747769475092,507.82694083248896,1336.2145174232842,668.5056484968296C1324.0542578990592,829.1843561611703,1361.84281542639,971.2505198492404,1333.8454309689978,1153.0604490276464C1305.8480465116056,1334.8703782060525,1177.2044491737645,1591.5419650718736,1168.2302106789316,1759.365223567266C1159.2559721840987,1927.1884820626583,1261.371701779822,2093.227537261211,1280,2160L 1920 2160 L 1920 -1080 Z" fill="url(&quot;#SvgjsLinearGradient1004&quot;)">
    </path>
    <path d="M1600,-1080C1613.673863873465,-1017.7817217047276,1698.5138879669723,-846.6548339269276,1682.0431832407908,-706.6903302283656C1665.5724785146092,-566.7258265298036,1511.9988180998816,-370.06959119239764,1501.1757716429108,-240.21297780862784C1490.35272518594,-110.35636442485807,1599.144792699853,-59.34818674406321,1617.1049044989652,72.449350074253C1635.0650162980774,204.24688689256922,1603.7020308745543,417.14525790809193,1608.9364424375835,550.5722431012696C1614.1708540006127,683.9992282944472,1648.9919203907264,718.8597923126912,1648.5113738771402,873.0112612333191C1648.030827363554,1027.1627301539472,1629.3649936216461,1340.8009575005751,1606.0531633560663,1475.4810566250376C1582.7413330904865,1610.1611557495,1509.6492528430053,1567.0053654176002,1508.640392283661,1681.091855980094C1507.6315317243166,1795.1783465425876,1584.7733987139436,2080.1819759966825,1600,2160L 1920 2160 L 1920 -1080 Z" fill="url(&quot;#SvgjsLinearGradient1005&quot;)">
    </path>
  </g>
  <defs>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1000">
      <stop stop-color="#000000" offset="0">
      </stop>
      <stop stop-color="#000000" offset="0">
      </stop>
    </linearGradient>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1001">
      <stop stop-color="#2a2a2a" offset="0">
      </stop>
      <stop stop-color="#2a2a2a" offset="0.16666666666666666">
      </stop>
    </linearGradient>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1002">
      <stop stop-color="#555555" offset="0">
      </stop>
      <stop stop-color="#555555" offset="0.3333333333333333">
      </stop>
    </linearGradient>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1003">
      <stop stop-color="#7f7f7f" offset="0">
      </stop>
      <stop stop-color="#7f7f7f" offset="0.5">
      </stop>
    </linearGradient>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1004">
      <stop stop-color="#aaaaaa" offset="0">
      </stop>
      <stop stop-color="#aaaaaa" offset="0.6666666666666666">
      </stop>
    </linearGradient>
    <linearGradient x1="0.1" y1="0" x2="0" y2="1" id="SvgjsLinearGradient1005">
      <stop stop-color="#d4d4d4" offset="0">
      </stop>
      <stop stop-color="#d4d4d4" offset="0.8333333333333334">
      </stop>
    </linearGradient>
  </defs>
</svg>
```

[↑ Table of contents](#toc)

<a name="#basic-pattern-repository"></a>
## Basic Pattern Repository

[Basic Pattern Repository](https://patterns.helloyes.dev/?utm_source=dev.to/koddr) is a just SVG for your delight! A distinctive feature of the project is the ability to load the necessary pattern through the API. This approach not only saves development time, but also keeps your CSS code untouched.

![basic pattern repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/totcfvxqxlzx1w6i6pj9.png)

To get a JSON response containing all available patterns as entries:

```console
https://patterns.helloyes.dev/api/patterns.json
```

To get a JSON response for a specific pattern:

```console
https://patterns.helloyes.dev/api/pattern/<PATTERN NUMBER>.json
```

[↑ Table of contents](#toc)

<a name="#figen"></a>
## Figen

[Figen](https://figen.cc/?utm_source=dev.to/koddr) is a free online post cover and background generator tool for social media, like Twitter, Facebook, Instagram, LinkedIn and so on. 

Saves a lot of time, and it looks perfect! I, personally, use it for some of my Twitter posts and placeholders for projects.

> 😉 **Note:** By the way, [follow me](https://twitter.com/true_koddr) to keep up to date with new articles!

![figen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sa0l1m7uvg9z4ccv6pd8.png)

The settings are wealthy and include:

- Image size with presets;
- Shapes support;
- Background and gradient colors;
- Upload photo for background;
- Text editor;

Unfortunately, the format of the tool suggests using it immediately in applications, so the output will be an optimized PNG file rather than SVG code. For example, this one:

![figen output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h60gdxd9ff8l9rbzx1c9.png)

[↑ Table of contents](#toc)

<a name=""></a>
## Photos and videos by

- Tools authors and Vic Shóstak

<a name=""></a>
## P.S.

If you want more articles (like this) on this blog, then post a comment below and subscribe to me. Thanks! 😻

And of course, you can help me make developers' lives even better! Just connect to one of my projects as a contributor. It's easy!

My projects that need your help (and stars) 👇

- 🔥 [gowebly][gowebly_url]: A next-generation CLI tool for easily build amazing web applications with Go on the backend, using htmx & hyperscript and the most popular atomic/utility-first CSS frameworks on the frontend.
- ✨ [create-go-app][cgapp_url]: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.
- 🏃 [yatr][yatr_url]: Yet Another Task Runner allows you to organize and automate your routine operations that you normally do in Makefile (or else) for each project.
- 📚 [gosl][gosl_url]: The Go Snippet Library provides snippets collection for working with routine operations in your Go programs with a super user-friendly API and the most efficient performance.
- 🏄‍♂️ [csv2api][csv2api_url]: The parser reads the CSV file with the raw data, filters the records, identifies fields to be changed, and sends a request to update the data to the specified endpoint of your REST API.
- 🚴 [json2csv][json2csv_url]: The parser can read given folder with JSON files, filtering and qualifying input data with intent & stop words dictionaries and save results to CSV files by given chunk size.

<!-- Footer links -->

[gowebly_url]: https://github.com/gowebly
[cgapp_url]: https://github.com/create-go-app
[yatr_url]: https://github.com/koddr/yatr
[gosl_url]: https://github.com/koddr/gosl
[csv2api_url]: https://github.com/koddr/csv2api
[json2csv_url]: https://github.com/koddr/json2csv