diff --git a/components.d.ts b/components.d.ts
index 84e879c9..6676c8b2 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -5,147 +5,148 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 import '@vue/runtime-core'
 
-export {};
+export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    '404.page': typeof import('./src/pages/404.page.vue')['default'];
-    About: typeof import('./src/pages/About.vue')['default'];
-    App: typeof import('./src/App.vue')['default'];
-    'Base.layout': typeof import('./src/layouts/base.layout.vue')['default'];
-    Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default'];
-    Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default'];
-    BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default'];
-    Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default'];
-    BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default'];
-    Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default'];
-    CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default'];
-    CButton: typeof import('./src/ui/c-button/c-button.vue')['default'];
-    'CButton.demo': typeof import('./src/ui/c-button/c-button.demo.vue')['default'];
-    CCard: typeof import('./src/ui/c-card/c-card.vue')['default'];
-    'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default'];
-    ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default'];
-    Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default'];
-    CLink: typeof import('./src/ui/c-link/c-link.vue')['default'];
-    'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default'];
-    CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default'];
-    ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default'];
-    ColoredCard: typeof import('./src/components/ColoredCard.vue')['default'];
-    CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default'];
-    CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default'];
-    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default'];
-    'Demo.routes': typeof import('./src/ui/demo/demo.routes.vue')['default'];
-    DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default'];
-    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default'];
-    DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default'];
-    DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default'];
-    DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default'];
-    Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default'];
-    Encryption: typeof import('./src/tools/encryption/encryption.vue')['default'];
-    EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default'];
-    FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default'];
-    FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default'];
-    GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default'];
-    HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default'];
-    HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default'];
-    'Home.page': typeof import('./src/pages/Home.page.vue')['default'];
-    HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default'];
-    HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default'];
-    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default'];
-    InputCopyable: typeof import('./src/components/InputCopyable.vue')['default'];
-    IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default'];
-    Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default'];
-    Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default'];
-    Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default'];
-    Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default'];
-    JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default'];
-    JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default'];
-    JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default'];
-    JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default'];
-    JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default'];
-    KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default'];
-    LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default'];
-    MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default'];
-    MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default'];
-    MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default'];
-    MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default'];
-    MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default'];
-    MenuLayout: typeof import('./src/components/MenuLayout.vue')['default'];
-    MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default'];
-    MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default'];
-    NAlert: typeof import('naive-ui')['NAlert'];
-    NAutoComplete: typeof import('naive-ui')['NAutoComplete'];
-    NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'];
-    NButton: typeof import('naive-ui')['NButton'];
-    NCard: typeof import('naive-ui')['NCard'];
-    NCheckbox: typeof import('naive-ui')['NCheckbox'];
-    NCode: typeof import('naive-ui')['NCode'];
-    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'];
-    NColorPicker: typeof import('naive-ui')['NColorPicker'];
-    NConfigProvider: typeof import('naive-ui')['NConfigProvider'];
-    NDatePicker: typeof import('naive-ui')['NDatePicker'];
-    NDivider: typeof import('naive-ui')['NDivider'];
-    NDynamicInput: typeof import('naive-ui')['NDynamicInput'];
-    NEllipsis: typeof import('naive-ui')['NEllipsis'];
-    NForm: typeof import('naive-ui')['NForm'];
-    NFormItem: typeof import('naive-ui')['NFormItem'];
-    NGi: typeof import('naive-ui')['NGi'];
-    NGrid: typeof import('naive-ui')['NGrid'];
-    NH1: typeof import('naive-ui')['NH1'];
-    NH2: typeof import('naive-ui')['NH2'];
-    NH3: typeof import('naive-ui')['NH3'];
-    NIcon: typeof import('naive-ui')['NIcon'];
-    NImage: typeof import('naive-ui')['NImage'];
-    NInput: typeof import('naive-ui')['NInput'];
-    NInputGroup: typeof import('naive-ui')['NInputGroup'];
-    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel'];
-    NInputNumber: typeof import('naive-ui')['NInputNumber'];
-    NLayout: typeof import('naive-ui')['NLayout'];
-    NLayoutSider: typeof import('naive-ui')['NLayoutSider'];
-    NMenu: typeof import('naive-ui')['NMenu'];
-    NP: typeof import('naive-ui')['NP'];
-    NPageHeader: typeof import('naive-ui')['NPageHeader'];
-    NProgress: typeof import('naive-ui')['NProgress'];
-    NScrollbar: typeof import('naive-ui')['NScrollbar'];
-    NSelect: typeof import('naive-ui')['NSelect'];
-    NSlider: typeof import('naive-ui')['NSlider'];
-    NSpace: typeof import('naive-ui')['NSpace'];
-    NStatistic: typeof import('naive-ui')['NStatistic'];
-    NSwitch: typeof import('naive-ui')['NSwitch'];
-    NTable: typeof import('naive-ui')['NTable'];
-    NTag: typeof import('naive-ui')['NTag'];
-    NText: typeof import('naive-ui')['NText'];
-    NTooltip: typeof import('naive-ui')['NTooltip'];
-    NUpload: typeof import('naive-ui')['NUpload'];
-    NUploadDragger: typeof import('naive-ui')['NUploadDragger'];
-    OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default'];
-    PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default'];
-    QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default'];
-    RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default'];
-    ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default'];
-    RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default'];
-    RouterLink: typeof import('vue-router')['RouterLink'];
-    RouterView: typeof import('vue-router')['RouterView'];
-    RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default'];
-    SearchBar: typeof import('./src/components/SearchBar.vue')['default'];
-    SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default'];
-    SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default'];
-    SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default'];
-    SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default'];
-    SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default'];
-    TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default'];
-    TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default'];
-    TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default'];
-    TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default'];
-    TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default'];
-    'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default'];
-    'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default'];
-    ToolCard: typeof import('./src/components/ToolCard.vue')['default'];
-    UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default'];
-    UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default'];
-    UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default'];
-    UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default'];
-    UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default'];
-    YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default'];
+    '404.page': typeof import('./src/pages/404.page.vue')['default']
+    About: typeof import('./src/pages/About.vue')['default']
+    App: typeof import('./src/App.vue')['default']
+    'Base.layout': typeof import('./src/layouts/base.layout.vue')['default']
+    Base64FileConverter: typeof import('./src/tools/base64-file-converter/base64-file-converter.vue')['default']
+    Base64StringConverter: typeof import('./src/tools/base64-string-converter/base64-string-converter.vue')['default']
+    BasicAuthGenerator: typeof import('./src/tools/basic-auth-generator/basic-auth-generator.vue')['default']
+    Bcrypt: typeof import('./src/tools/bcrypt/bcrypt.vue')['default']
+    BenchmarkBuilder: typeof import('./src/tools/benchmark-builder/benchmark-builder.vue')['default']
+    Bip39Generator: typeof import('./src/tools/bip39-generator/bip39-generator.vue')['default']
+    CaseConverter: typeof import('./src/tools/case-converter/case-converter.vue')['default']
+    CButton: typeof import('./src/ui/c-button/c-button.vue')['default']
+    'CButton.demo': typeof import('./src/ui/c-button/c-button.demo.vue')['default']
+    CCard: typeof import('./src/ui/c-card/c-card.vue')['default']
+    'CCard.demo': typeof import('./src/ui/c-card/c-card.demo.vue')['default']
+    ChmodCalculator: typeof import('./src/tools/chmod-calculator/chmod-calculator.vue')['default']
+    Chronometer: typeof import('./src/tools/chronometer/chronometer.vue')['default']
+    CLink: typeof import('./src/ui/c-link/c-link.vue')['default']
+    'CLink.demo': typeof import('./src/ui/c-link/c-link.demo.vue')['default']
+    CollapsibleToolMenu: typeof import('./src/components/CollapsibleToolMenu.vue')['default']
+    ColorConverter: typeof import('./src/tools/color-converter/color-converter.vue')['default']
+    ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
+    CopyableIpLike: typeof import('./src/tools/ipv4-subnet-calculator/copyable-ip-like.vue')['default']
+    CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
+    DateTimeConverter: typeof import('./src/tools/date-time-converter/date-time-converter.vue')['default']
+    'Demo.routes': typeof import('./src/ui/demo/demo.routes.vue')['default']
+    DemoWrapper: typeof import('./src/ui/demo/demo-wrapper.vue')['default']
+    DeviceInformation: typeof import('./src/tools/device-information/device-information.vue')['default']
+    DiffViewer: typeof import('./src/tools/json-diff/diff-viewer/diff-viewer.vue')['default']
+    DockerRunToDockerComposeConverter: typeof import('./src/tools/docker-run-to-docker-compose-converter/docker-run-to-docker-compose-converter.vue')['default']
+    DynamicValues: typeof import('./src/tools/benchmark-builder/dynamic-values.vue')['default']
+    Editor: typeof import('./src/tools/html-wysiwyg-editor/editor/editor.vue')['default']
+    Encryption: typeof import('./src/tools/encryption/encryption.vue')['default']
+    EtaCalculator: typeof import('./src/tools/eta-calculator/eta-calculator.vue')['default']
+    FavoriteButton: typeof import('./src/components/FavoriteButton.vue')['default']
+    FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
+    GitMemo: typeof import('./src/tools/git-memo/git-memo.md')['default']
+    HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
+    HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
+    'Home.page': typeof import('./src/pages/Home.page.vue')['default']
+    HtmlEntities: typeof import('./src/tools/html-entities/html-entities.vue')['default']
+    HtmlWysiwygEditor: typeof import('./src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue')['default']
+    HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
+    InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
+    IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
+    Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
+    Ipv4RangeExpander: typeof import('./src/tools/ipv4-range-expander/ipv4-range-expander.vue')['default']
+    Ipv4SubnetCalculator: typeof import('./src/tools/ipv4-subnet-calculator/ipv4-subnet-calculator.vue')['default']
+    Ipv6UlaGenerator: typeof import('./src/tools/ipv6-ula-generator/ipv6-ula-generator.vue')['default']
+    JsonDiff: typeof import('./src/tools/json-diff/json-diff.vue')['default']
+    JsonMinify: typeof import('./src/tools/json-minify/json-minify.vue')['default']
+    JsonToYaml: typeof import('./src/tools/json-to-yaml-converter/json-to-yaml.vue')['default']
+    JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
+    JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
+    KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
+    LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
+    MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
+    MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
+    MenuBar: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar.vue')['default']
+    MenuBarItem: typeof import('./src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue')['default']
+    MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
+    MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
+    MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
+    MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
+    NAutoComplete: typeof import('naive-ui')['NAutoComplete']
+    NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
+    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
+    NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
+    NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
+    NH3: typeof import('naive-ui')['NH3']
+    NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NLayout: typeof import('naive-ui')['NLayout']
+    NLayoutSider: typeof import('naive-ui')['NLayoutSider']
+    NMenu: typeof import('naive-ui')['NMenu']
+    NP: typeof import('naive-ui')['NP']
+    NPageHeader: typeof import('naive-ui')['NPageHeader']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSlider: typeof import('naive-ui')['NSlider']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
+    NText: typeof import('naive-ui')['NText']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    NUpload: typeof import('naive-ui')['NUpload']
+    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
+    OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
+    PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default']
+    QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default']
+    RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default']
+    ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default']
+    RomanNumeralConverter: typeof import('./src/tools/roman-numeral-converter/roman-numeral-converter.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
+    SearchBar: typeof import('./src/components/SearchBar.vue')['default']
+    SearchBarItem: typeof import('./src/components/SearchBarItem.vue')['default']
+    SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
+    SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
+    SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']
+    SvgMeshGradientGenerator: typeof import('./src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.vue')['default']
+    SvgPlaceholderGenerator: typeof import('./src/tools/svg-placeholder-generator/svg-placeholder-generator.vue')['default']
+    TemperatureConverter: typeof import('./src/tools/temperature-converter/temperature-converter.vue')['default']
+    TextareaCopyable: typeof import('./src/components/TextareaCopyable.vue')['default']
+    TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
+    TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
+    TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
+    'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
+    'Tool.layout': typeof import('./src/layouts/tool.layout.vue')['default']
+    ToolCard: typeof import('./src/components/ToolCard.vue')['default']
+    UrlEncoder: typeof import('./src/tools/url-encoder/url-encoder.vue')['default']
+    UrlParser: typeof import('./src/tools/url-parser/url-parser.vue')['default']
+    UserAgentParser: typeof import('./src/tools/user-agent-parser/user-agent-parser.vue')['default']
+    UserAgentResultCards: typeof import('./src/tools/user-agent-parser/user-agent-result-cards.vue')['default']
+    UuidGenerator: typeof import('./src/tools/uuid-generator/uuid-generator.vue')['default']
+    YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
   }
 }
diff --git a/src/tools/index.ts b/src/tools/index.ts
index bc54b4d2..1e2df49e 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -14,6 +14,7 @@ import { tool as userAgentParser } from './user-agent-parser';
 import { tool as ipv4SubnetCalculator } from './ipv4-subnet-calculator';
 import { tool as dockerRunToDockerComposeConverter } from './docker-run-to-docker-compose-converter';
 import { tool as htmlWysiwygEditor } from './html-wysiwyg-editor';
+import { tool as svgMeshGradientGenerator } from './svg-mesh-gradient-generator';
 import { tool as rsaKeyPairGenerator } from './rsa-key-pair-generator';
 import { tool as textToNatoAlphabet } from './text-to-nato-alphabet';
 import { tool as slugifyString } from './slugify-string';
@@ -98,7 +99,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Images',
-    components: [qrCodeGenerator, svgPlaceholderGenerator],
+    components: [qrCodeGenerator, svgPlaceholderGenerator, svgMeshGradientGenerator],
   },
   {
     name: 'Development',
diff --git a/src/tools/svg-mesh-gradient-generator/index.ts b/src/tools/svg-mesh-gradient-generator/index.ts
new file mode 100644
index 00000000..37bf456a
--- /dev/null
+++ b/src/tools/svg-mesh-gradient-generator/index.ts
@@ -0,0 +1,12 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Svg mesh gradient generator',
+  path: '/svg-mesh-gradient-generator',
+  description: '',
+  keywords: ['svg', 'mesh', 'gradient', 'generator'],
+  component: () => import('./svg-mesh-gradient-generator.vue'),
+  icon: ArrowsShuffle,
+  createdAt: new Date('2023-05-05'),
+});
diff --git a/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.test.ts b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.test.ts
new file mode 100644
index 00000000..240d1475
--- /dev/null
+++ b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.test.ts
@@ -0,0 +1,6 @@
+import { expect, describe, it } from 'vitest';
+// import { } from './svg-mesh-gradient-generator.service';
+//
+// describe('svg-mesh-gradient-generator', () => {
+//
+// })
\ No newline at end of file
diff --git a/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.ts b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.ts
new file mode 100644
index 00000000..bcf1ab46
--- /dev/null
+++ b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.service.ts
@@ -0,0 +1,17 @@
+// A function that generates a blurry mesh gradient background image in a canvas from multiple colors
+export function generateMeshGradient(colors: string[], canvas: HTMLCanvasElement) {
+  const ctx = canvas.getContext('2d')!;
+  const { width, height } = canvas;
+  const gradient = ctx.createLinearGradient(0, 0, width, height);
+  colors.forEach((color, index) => {
+    gradient.addColorStop(index / (colors.length - 1), color);
+  });
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, width, height);
+  const meshGradient = ctx.createLinearGradient(0, 0, width, height);
+  meshGradient.addColorStop(0, 'rgba(0, 0, 0, 0)');
+  meshGradient.addColorStop(0.5, 'rgba(0, 0, 0, 0.1)');
+  meshGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+  ctx.fillStyle = meshGradient;
+  ctx.fillRect(0, 0, width, height);
+}
diff --git a/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.vue b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.vue
new file mode 100644
index 00000000..e7a32fd4
--- /dev/null
+++ b/src/tools/svg-mesh-gradient-generator/svg-mesh-gradient-generator.vue
@@ -0,0 +1,49 @@
+<template>
+  <svg viewBox="0 0 3000 2000" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <radialGradient
+        v-for="{ id, cx, cy, fx, fy, color } of gradients"
+        :id="id"
+        :key="id"
+        :cx="cx"
+        :cy="cy"
+        r="100%"
+        :fx="fx"
+        :fy="fy"
+        gradientUnits="objectBoundingBox"
+      >
+        <stop offset="0" :stop-color="color" stop-opacity="1"></stop>
+        <stop offset="0.5" :stop-color="color + '00'" stop-opacity="0"></stop>
+      </radialGradient>
+    </defs>
+    <rect v-for="{ id, fill } of gradients" :key="id" x="0" y="0" width="100%" height="100%" :fill="fill"></rect>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import _ from 'lodash';
+import { ref, computed } from 'vue';
+
+const randomPercent = () => `${Math.random() * 100}%`;
+const randomColor = () => '#' + (((1 << 24) * Math.random()) | 0).toString(16).padStart(6, '0');
+
+const quantity = ref(5);
+
+const gradients = computed(() =>
+  Array.from({ length: quantity.value }, () => {
+    const id = _.uniqueId('id-');
+
+    return {
+      id,
+      fill: `url(#${id})`,
+      cx: randomPercent(),
+      cy: randomPercent(),
+      fx: randomPercent(),
+      fy: randomPercent(),
+      color: randomColor(),
+    };
+  }),
+);
+</script>
+
+<style lang="less" scoped></style>