Vic Shóstak

Posted on Oct 11, 2021 • Edited on Aug 17

🌈 Wonderful tools for creating secondary visual elements for your website

#css #webdev #opensource #uiweekly

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! 👇

Blobbb

The Blobbb project is an excellent example of the most convenient tool for creating random blobs with comprehensive settings.

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:

<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

Animated Gradient Background Generator

Animated Gradient Background Generator. The name of this tool speaks for itself. Completely based on CSS features, no JavaScript.

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:

.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

SVG Shape Dividers Creator

SVG Shape Dividers Creator 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.

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:

Example “copy-paste” output:

.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

Wicked Backgrounds

Wicked Backgrounds 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.

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:

<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

Basic Pattern Repository

Basic Pattern Repository 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.

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

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

To get a JSON response for a specific pattern:

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

↑ Table of contents

Figen

Figen 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 to keep up to date with new articles!

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:

↑ Table of contents

Photos and videos by

Tools authors and Vic Shóstak

P.S.

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

❗️ You can support me on Boosty, both on a permanent and on a one-time basis. All proceeds from this way will go to support my OSS projects and will energize me to create new products and articles for the community.

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 main projects that need your help (and stars) 👇

🔥 gowebly: A next-generation CLI tool that makes it easy to create amazing web applications with Go on the backend, using htmx, hyperscript or Alpine.js and the most popular CSS frameworks on the frontend.
✨ create-go-app: Create a new production-ready project with Go backend, frontend and deploy automation by running one CLI command.

Other my small projects: yatr, gosl, json2csv, csv2api.