{"id":452,"date":"2020-11-02T09:25:11","date_gmt":"2020-11-02T09:25:11","guid":{"rendered":"https:\/\/www.techgrapple.com\/online-tools\/?p=452"},"modified":"2024-12-16T04:21:35","modified_gmt":"2024-12-16T04:21:35","slug":"css-background-pattern-generator-with-data-uri-and-png","status":"publish","type":"post","link":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/","title":{"rendered":"CSS Background Pattern Generator with Data URI and PNG"},"content":{"rendered":"<p>If you are looking to generate some cool background pattern image for your blog\/website or for any other purpose, this tool makes it easy. You can fine more info on usage underneath the tool.<\/p>\n\n\n\n<div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'>\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- CMG Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-5237527339083059\"\n     data-ad-slot=\"7121361926\"\n     data-ad-format=\"auto\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/div>\n\n\n\n\n<p style=\"color:red; border:solid 3px; padding:5px; text-align:center;\">This page is not compatible for Mobile Devices. If you are using a Tablet, please rotate it to Landscape mode. If you are on Computer, please ignore this message.<\/p>\n\n\n\n<p>If you came here looking for something else, we also have <strong><a href=\"https:\/\/www.techgrapple.com\/online-tools\/background-gradient-generator\/\">Gradient Picker<\/a> <\/strong>and <a href=\"https:\/\/www.techgrapple.com\/online-tools\/color-picker-with-hex-rgb-and-hsl-code\/\"><strong>Color Picker<\/strong><\/a> tools.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Read Instruction below if you cannot use the Pen<\/h4>\n\n\n\n<center><div class=\"tgtfs\" style=\"background-color:#1F171E;height:42px;position:relative;\"><span onclick=\"activateFullscreen(document.querySelector('.tgtools'));\" style=\"color:#ffffff;font-weight:bold;position:absolute;margin:8px 0px 0px 20px; font-size:25px; cursor: pointer;\">View in Fullscreen Mode<\/span><img decoding=\"async\" onclick=\"activateFullscreen(document.querySelector('.tgtools'));\" style=\"right:5px; position:absolute; padding:4px 2px 2px 2px; cursor: pointer;\" src=\"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2022\/12\/fullscreen.png\" width=\"35px\" height=\"35px\"><\/div> <iframe class=\"tgtools\" allow=\"fullscreen\" src=\"https:\/\/www.techgrapple.com\/online-tools\/tools\/2020\/css-background-pattern-generator\/index.html\" width=\"100%\" class=\"cssbgpattern\" height=\"550px\"><\/iframe><\/center>\n\n\n\n<h2 class=\"wp-block-heading\">How to use this Background Pattern Generator tool<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Select a Background Color first if you want or just leave it as it is. It is transparent by default.<\/li><li>If you only want a plain background, you don&#8217;t need to do anything else after selecting the background color. Just download the Image file or Copy Data URI. If you want to create a pattern, follow the steps below.<\/li><li>Now select a Pen Color to create a pattern.<\/li><li>Click on the box on the left side and click on different places. It will show you a preview of the pattern on the right side.<\/li><li>Scale option can be zoomed to zoom the pattern<\/li><li>Once you are satisfied with the created pattern, click the Download button to get a PNG image or copy Data URI (whatever you need).<\/li><\/ul>\n\n\n\n<div class='code-block code-block-1' style='margin: 8px auto; text-align: center; display: block; clear: both;'>\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- CMG Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-5237527339083059\"\n     data-ad-slot=\"7121361926\"\n     data-ad-format=\"auto\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/div>\n\n\n<!--themify_builder_content-->\n<div id=\"themify_builder_content-452\" data-postid=\"452\" class=\"themify_builder_content themify_builder_content-452 themify_builder tf_clear\">\n    <\/div>\n<!--\/themify_builder_content-->","protected":false},"excerpt":{"rendered":"<p>If you are looking to generate some cool background pattern image for your blog\/website or for any other purpose, this tool makes it easy. You can fine more info on usage underneath the tool. This page is not compatible for Mobile Devices. If you are using a Tablet, please rotate it to Landscape mode. If [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":468,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-452","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-developer-and-seo-tools","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Background Pattern Generator with Data URI and PNG - Online Tools<\/title>\n<meta name=\"description\" content=\"Genearate background pattern according to your need for your website, blog, app, or game. Download as PNG Image or get Data URI\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Background Pattern Generator with Data URI and PNG - Online Tools\" \/>\n<meta property=\"og:description\" content=\"Genearate background pattern according to your need for your website, blog, app, or game. Download as PNG Image or get Data URI\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/\" \/>\n<meta property=\"og:site_name\" content=\"Online Tools\" \/>\n<meta property=\"article:published_time\" content=\"2020-11-02T09:25:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-16T04:21:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2020\/11\/css-bg.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Zoheb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zoheb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/\"},\"author\":{\"name\":\"Zoheb\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/#\\\/schema\\\/person\\\/272b9cf9eea98fccb340d33773e12635\"},\"headline\":\"CSS Background Pattern Generator with Data URI and PNG\",\"datePublished\":\"2020-11-02T09:25:11+00:00\",\"dateModified\":\"2024-12-16T04:21:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/\"},\"wordCount\":243,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/css-bg.jpg\",\"articleSection\":[\"Webmaster and Content Creation Tools\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/\",\"url\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/\",\"name\":\"CSS Background Pattern Generator with Data URI and PNG - Online Tools\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/css-bg.jpg\",\"datePublished\":\"2020-11-02T09:25:11+00:00\",\"dateModified\":\"2024-12-16T04:21:35+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/#\\\/schema\\\/person\\\/272b9cf9eea98fccb340d33773e12635\"},\"description\":\"Genearate background pattern according to your need for your website, blog, app, or game. Download as PNG Image or get Data URI\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/css-bg.jpg\",\"contentUrl\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/css-bg.jpg\",\"width\":500,\"height\":300,\"caption\":\"css bg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/css-background-pattern-generator-with-data-uri-and-png\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Background Pattern Generator with Data URI and PNG\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/#website\",\"url\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/\",\"name\":\"Online Tools\",\"description\":\"Free Web Apps by TechGrapple\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.techgrapple.com\\\/online-tools\\\/#\\\/schema\\\/person\\\/272b9cf9eea98fccb340d33773e12635\",\"name\":\"Zoheb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g\",\"caption\":\"Zoheb\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Background Pattern Generator with Data URI and PNG - Online Tools","description":"Genearate background pattern according to your need for your website, blog, app, or game. Download as PNG Image or get Data URI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/","og_locale":"en_US","og_type":"article","og_title":"CSS Background Pattern Generator with Data URI and PNG - Online Tools","og_description":"Genearate background pattern according to your need for your website, blog, app, or game. Download as PNG Image or get Data URI","og_url":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/","og_site_name":"Online Tools","article_published_time":"2020-11-02T09:25:11+00:00","article_modified_time":"2024-12-16T04:21:35+00:00","og_image":[{"width":500,"height":300,"url":"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2020\/11\/css-bg.jpg","type":"image\/jpeg"}],"author":"Zoheb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Zoheb","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/#article","isPartOf":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/"},"author":{"name":"Zoheb","@id":"https:\/\/www.techgrapple.com\/online-tools\/#\/schema\/person\/272b9cf9eea98fccb340d33773e12635"},"headline":"CSS Background Pattern Generator with Data URI and PNG","datePublished":"2020-11-02T09:25:11+00:00","dateModified":"2024-12-16T04:21:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/"},"wordCount":243,"commentCount":0,"image":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/#primaryimage"},"thumbnailUrl":"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2020\/11\/css-bg.jpg","articleSection":["Webmaster and Content Creation Tools"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/","url":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/","name":"CSS Background Pattern Generator with Data URI and PNG - Online Tools","isPartOf":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/#primaryimage"},"image":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/#primaryimage"},"thumbnailUrl":"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2020\/11\/css-bg.jpg","datePublished":"2020-11-02T09:25:11+00:00","dateModified":"2024-12-16T04:21:35+00:00","author":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/#\/schema\/person\/272b9cf9eea98fccb340d33773e12635"},"description":"Genearate background pattern according to your need for your website, blog, app, or game. Download as PNG Image or get Data URI","breadcrumb":{"@id":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/#primaryimage","url":"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2020\/11\/css-bg.jpg","contentUrl":"https:\/\/www.techgrapple.com\/online-tools\/wp-content\/uploads\/2020\/11\/css-bg.jpg","width":500,"height":300,"caption":"css bg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.techgrapple.com\/online-tools\/css-background-pattern-generator-with-data-uri-and-png\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.techgrapple.com\/online-tools\/"},{"@type":"ListItem","position":2,"name":"CSS Background Pattern Generator with Data URI and PNG"}]},{"@type":"WebSite","@id":"https:\/\/www.techgrapple.com\/online-tools\/#website","url":"https:\/\/www.techgrapple.com\/online-tools\/","name":"Online Tools","description":"Free Web Apps by TechGrapple","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.techgrapple.com\/online-tools\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.techgrapple.com\/online-tools\/#\/schema\/person\/272b9cf9eea98fccb340d33773e12635","name":"Zoheb","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/520ca7ba2dc1e8d4ff6fa8f6f6a434c0dc9d5997162e4fd46b60a69c58538bbd?s=96&d=mm&r=g","caption":"Zoheb"}}]}},"builder_content":"","_links":{"self":[{"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/posts\/452","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/comments?post=452"}],"version-history":[{"count":0,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/posts\/452\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/media\/468"}],"wp:attachment":[{"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/media?parent=452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/categories?post=452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.techgrapple.com\/online-tools\/wp-json\/wp\/v2\/tags?post=452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}