🌈 为您的网站创建次要视觉元素的精彩工具

介绍

嘿，开发人员们！👋

这里精选了一些久经考验的在线工具，它们可以显著缩短您为下一个网站（以及后续网站）开发视觉概念所需的时间。所有工具都旨在为 UI 创建辅助视觉效果，例如波浪、水滴、图案以及动画背景和渐变。

👌免责声明：我通常不太喜欢这种风格的文章，但这类工具已经积累了太多，无法为每一个都写一篇单独的文章。所以别担心，我会继续用深入的文章来取悦你，而不是去写“Top X”之类的文章！

好的，我们开始吧！👇

📝 目录

布洛布
动画渐变背景生成器
SVG 形状分隔线创建器
邪恶的背景
基本模式存储库
菲根

布洛布

Blobbb项目是用于创建具有全面设置的随机 blob 的最便捷工具的绝佳示例。

虽然选项不多，但这确实就是您所需要的：

填充颜色；
描边颜色；
渐变色；
图案预设；

“复制粘贴”输出示例：

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

↑ 目录

动画渐变背景生成器

动画渐变背景生成器。这个工具的名字就说明了一切。完全基于 CSS 特性，无需 JavaScript。

选项很少，但它甚至更好，因为这种动画背景在现有网站中更容易实现：

一组颜色；
颜色运动的角度；
动画速度；

“复制粘贴”输出示例：

.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%;
  }
}

↑ 目录

SVG 形状分隔线创建器

SVG Shape Dividers Creator是一款非常实用的工具，可用于为您的网站生成内容分割波（以及更多）。它基于纯 CSS，可以轻松集成到任何项目中。

有大量选项供您选择：

波浪位置和颜色；
短轴和长轴；
动画时长；
支持手机和平板电脑的应用内视图；

我最喜欢的功能是超过 35 种免费波浪图案，例如这个：

“复制粘贴”输出示例：

.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);
  }
}

↑ 目录

邪恶的背景

Wicked Backgrounds是一款用于创建精美且完全可自定义的波浪形 SVG 背景的工具。这款在线工具的作者们做得非常出色，因此它的设计和用户体验都非常出色。

没有我想要的那么多选项（例如，我仍然想控制每个波的曲率），但对于大多数任务来说这已经足够了：

波数；
用彩色模式着色；
波浪旋转的角度；
随机化波浪的形状；

“复制粘贴”输出示例：

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

↑ 目录

基本模式存储库

基本图案库 (Basic Pattern Repository)就是一个让你乐在其中的 SVG 库！该项目的一大特色是能够通过 API 加载所需的图案。这种方法不仅节省了开发时间，还能保持 CSS 代码的完整性。

要获取包含所有可用模式作为条目的 JSON 响应：

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

要获取特定模式的 JSON 响应：

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

↑ 目录

菲根

Figen是一款免费的在线帖子封面和背景生成器工具，适用于社交媒体，如 Twitter、Facebook、Instagram、LinkedIn 等。

节省了不少时间，而且看起来完美！我个人会用它来写一些推特帖子和一些项目的占位符。

😉注意：顺便说一句，关注我以了解最新文章！

设置丰富，包括：

带有预设的图像尺寸；
形状支持；
背景和渐变颜色；
上传背景照片；
文本编辑器；

遗憾的是，该工具的格式建议直接在应用程序中使用，因此输出将是优化的 PNG 文件，而不是 SVG 代码。例如，如下图所示：

↑ 目录

照片和视频来自

工具作者和 Vic Shóstak

聚苯乙烯

如果你想在本博客上看到更多类似的文章，请在下方留言并订阅我。谢谢！😻

❗️ 您可以在Boosty上支持我，可以是永久支持，也可以是一次性支持。所有收益都将用于支持我的开源项目，并激励我为社区创作新的产品和文章。

当然，你也可以帮助我改善开发者的生活！只需以贡献者的身份连接到我的一个项目即可。非常简单！

我的主要项目需要您的帮助（和星星）👇

🔥 gowebly：下一代 CLI 工具，可轻松使用 Go 在后端创建出色的 Web 应用程序，使用 htmx、hyperscript 或 Alpine.js 以及前端最流行的 CSS 框架。
✨ create-go-app：通过运行一个 CLI 命令，创建一个具有 Go 后端、前端和部署自动化的新的生产就绪项目。

我的其他小项目：yatr、gosl、json2csv、csv2api。

文章来源：https://dev.to/koddr/wonderful-tools-for-creating-secondary-visual-elements-for-your-website-3bj0