{"id":17108,"date":"2024-05-21T17:29:24","date_gmt":"2024-05-21T17:29:24","guid":{"rendered":"https:\/\/bestsoln.com\/web\/?page_id=17108"},"modified":"2024-05-23T20:32:26","modified_gmt":"2024-05-23T20:32:26","slug":"gradient-generator","status":"publish","type":"page","link":"https:\/\/bestsoln.com\/web\/web-tool\/gradient-generator\/","title":{"rendered":"Gradient Generator"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\">\t\t\t<!-- Flexy Breadcrumb -->\r\n\t\t\t<div class=\"fbc fbc-page\">\r\n\r\n\t\t\t\t<!-- Breadcrumb wrapper -->\r\n\t\t\t\t<div class=\"fbc-wrap\">\r\n\r\n\t\t\t\t\t<!-- Ordered list-->\r\n\t\t\t\t\t<ol class=\"fbc-items\" itemscope itemtype=\"https:\/\/schema.org\/BreadcrumbList\">\r\n\t\t\t\t\t\t            <li itemprop=\"itemListElement\" itemscope itemtype=\"https:\/\/schema.org\/ListItem\">\r\n                <span itemprop=\"name\">\r\n                    <!-- Home Link -->\r\n                    <a itemprop=\"item\" href=\"https:\/\/bestsoln.com\/web\">\r\n                    \r\n                                                    <i class=\"fa fa-home\" aria-hidden=\"true\"><\/i>Home                    <\/a>\r\n                <\/span>\r\n                <meta itemprop=\"position\" content=\"1\" \/><!-- Meta Position-->\r\n             <\/li><li><span class=\"fbc-separator\">\/<\/span><\/li><li class=\"active\" itemprop=\"itemListElement\" itemscope itemtype=\"https:\/\/schema.org\/ListItem\"><span itemprop=\"name\" title=\"Gradient Generator\">Gradient Generator<\/span><meta itemprop=\"position\" content=\"2\" \/><\/li>\t\t\t\t\t<\/ol>\r\n\t\t\t\t\t<div class=\"clearfix\"><\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\n\n\n\n<p><\/p>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">About Gradient Generator<\/h2>\n\n\n\n<p class=\"jusfy\">This Gradient Generator tool allows you to create beautiful CSS gradients effortlessly. You can either select your own colors or use the random background generator to produce stunning gradient backgrounds. Once you&#8217;re satisfied with your gradient, you can easily copy the generated CSS code to use in your web projects.<\/p>\n\n\n\n<p>Found a bug? <a href=\"https:\/\/bestsoln.com\/web\/contact-us\/\">Raise a bug here!<\/a><\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group has-border-color is-layout-constrained wp-container-core-group-is-layout-283b4700 wp-block-group-is-layout-constrained\" style=\"border-color:#ff6900;border-width:2px;border-radius:10px;margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<h2 class=\"wp-block-heading jusfy\">Generate Gradient<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-4e0443d7 wp-block-group-is-layout-constrained\" style=\"padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--20)\"><div id=\"app\" class=\"app\">\r\n    <div class=\"color-inputs\">\r\n        <input class=\"color1\" type=\"color\" name=\"color1\" value=\"#ff0000\">\r\n        <input class=\"color2\" type=\"color\" name=\"color2\" value=\"#ffff00\">\r\n    <\/div>\r\n    <h2>Current CSS Background<\/h2>\r\n    <p>OR<\/p>\r\n    <h2>Use Random Background Generator<\/h2>\r\n    <button id=\"button\" type=\"button\" name=\"button\" onclick=\"randomGradient()\">Random<\/button><br><br>\r\n    <h3 id=\"code\">linear-gradient(to right, rgb(255, 0, 2), rgb(255, 255, 0));<\/h3><br>\r\n    <button type=\"button\" class=\"copy-button\" onclick=\"myFunction()\">Copy Code<\/button>\r\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Use Gradient Generator?<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: <strong>Select Custom Colors<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"jusfy\">Use the two-color pickers to choose your desired colors. The gradient preview will update in real time based on your selections.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: <strong>Generate Random Gradient<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"jusfy\">Click the &#8220;Random&#8221; button to generate a random gradient background. This is perfect if you need some inspiration or want to see a variety of gradient combinations.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: <strong>View the CSS Code<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The CSS code for the current gradient will be displayed below the buttons. It updates automatically whenever you change the colors or generate a new random gradient.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: <strong>Copy the CSS Code<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click the &#8220;Copy Code&#8221; button to copy the generated CSS gradient code to your clipboard. You can then paste it into your CSS file or style block in your web project.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>This tool simplifies the process of creating and implementing gradients, making it easier for you to design visually appealing web pages.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>About Gradient Generator This Gradient Generator tool allows you to create beautiful CSS gradients effortlessly. You can either select your own colors or use the random background generator to produce stunning gradient backgrounds. Once you&#8217;re satisfied with your gradient, you&#8230;<\/p>\n","protected":false},"author":1,"featured_media":17341,"parent":17430,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-web-tools-right-sidebar","meta":{"googlesitekit_rrm_CAow1snDDA:productID":"","MSN_Categories":"Uncategorized","MSN_Publish_Option":false,"MSN_Is_Local_News":false,"MSN_Is_AIAC_Included":"Empty","MSN_Location":"[]","MSN_Add_Feature_Img_On_Top_Of_Post":false,"MSN_Has_Custom_Author":false,"MSN_Custom_Author":"","MSN_Has_Custom_Canonical_Url":false,"MSN_Custom_Canonical_Url":"","footnotes":""},"class_list":["post-17108","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/pages\/17108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/comments?post=17108"}],"version-history":[{"count":2,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/pages\/17108\/revisions"}],"predecessor-version":[{"id":17110,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/pages\/17108\/revisions\/17110"}],"up":[{"embeddable":true,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/pages\/17430"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/media\/17341"}],"wp:attachment":[{"href":"https:\/\/bestsoln.com\/web\/wp-json\/wp\/v2\/media?parent=17108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}