DEV Community

Cover image for 🌈 Wonderful tools for creating secondary visual elements for your website
Vic Shóstak
Vic Shóstak

Posted on • Edited on

🌈 Wonderful tools for creating secondary visual elements for your website

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

📝 Table of contents

Blobbb

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

blobbb

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>
Enter fullscreen mode Exit fullscreen mode

↑ 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.

animated gradient background generator

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%;
  }
}
Enter fullscreen mode Exit fullscreen mode

↑ 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.

svg shape dividers creator

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

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

↑ 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.

wicked backgrounds

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>
Enter fullscreen mode Exit fullscreen mode

↑ 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.

basic pattern repository

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

https://patterns.helloyes.dev/api/patterns.json
Enter fullscreen mode Exit fullscreen mode

To get a JSON response for a specific pattern:

https://patterns.helloyes.dev/api/pattern/<PATTERN NUMBER>.json
Enter fullscreen mode Exit fullscreen mode

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

figen

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

↑ 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.

support me on Boosty

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.

Top comments (8)

Collapse
 
emojipedia profile image
Emojipedia

Best of the best 😍

Collapse
 
mariusty profile image
mariusty

You are a life changer for me! Following you for a year, I got a job. I have no words to
thank you enough. I wish you all the best, buddy.

Collapse
 
thomasbnt profile image
Thomas Bnt

Top post 👍

Collapse
 
koddr profile image
Vic Shóstak

Thanks! You're welcome :)

Collapse
 
fixer1981 profile image
FIXER1981

Thanks!!!.. Nice post.

Collapse
 
koddr profile image
Vic Shóstak

Have a nice read 😊

Collapse
 
ozanbolel profile image
Ozan Bolel

ToolDeck has some of those and more :) Great post!

Collapse
 
koddr profile image
Vic Shóstak

Oh, thanks for sharing! ;)