CINXE.COM
Tailwind CSS Gradient Generator
<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta property="og:image" content="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/twcomponents/tailwind-gradient-generator-thumbnail.webp" /> <meta property="og:title" content="Tailwind CSS Gradient Generator" /> <meta property="og:description" content="Mix Tailwind CSS Colors and generate stunning text and background gradients or use our ready-made gradients to create remarkable designs." /> <meta name = "title" content="Tailwind CSS Gradient Generator"> <meta name = "description" content="Mix Tailwind CSS Colors and generate stunning text and background gradients or use our ready-made gradients to create remarkable designs."> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@TwComponents" /> <meta name="twitter:title" content="Tailwind CSS Gradient Generator" /> <meta name="twitter:description" content="Mix Tailwind CSS Colors and generate stunning text and background gradients or use our ready-made gradients to create remarkable designs." /> <meta name="twitter:image" content="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/twcomponents/tailwind-gradient-generator-thumbnail.webp" /> <link rel="canonical" href="https://www.creative-tim.com/twcomponents/gradient-generator" itemprop="URL"> <link rel="icon" href="https://raw.githubusercontent.com/creativetimofficial/public-assets/68ec797edf00b697e15c3c55e64d0532fb058c2e/twcomponents/sm-logo.svg"> <title>Tailwind CSS Gradient Generator</title> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NKDMSK6');</script> <!-- End Google Tag Manager --> <script type="module" crossorigin src="/twcomponents/gradient-generator/assets/index.6a6f181f.js"></script> <link rel="stylesheet" href="/twcomponents/gradient-generator/assets/index.56280536.css"> </head> <body> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <div id="app"></div> </body> </html>