Tailwind Gradient Generator
Generate beautiful mesh gradients for your Tailwind CSS projects. Pick a palette, preview live, and copy ready-to-use code — inline styles, custom CSS classes, or React components.
%22%2F%3E%3Cpath%20d%3D%22M%201708.24%20970.63%20L%201456.01%20999.07%20L%201312.87%20920.84%20L%201223.78%20835.88%20L%201144.21%20723.65%20L%201242.69%20611.00%20L%201337.90%20458.50%20L%201475.98%20427.74%20L%201716.04%20432.41%20L%201889.55%20491.90%20L%202014.55%20646.11%20L%201996.39%20786.67%20L%201852.77%20930.89%20Z%22%20fill%3D%22%23FCB055%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%20395.70%20803.85%20L%20276.48%20702.35%20L%2099.96%2095.23%20L%20204.77%20-348.54%20L%20417.94%20-569.64%20L%20695.46%20-624.62%20L%201147.10%20-356.97%20L%201055.36%2017.30%20L%201093.84%20604.52%20L%20944.89%20929.54%20Z%22%20fill%3D%22%23FCB055%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%201487.56%20640.75%20L%201585.78%20817.92%20L%201556.79%20937.18%20L%201476.70%201077.82%20L%201311.87%201084.86%20L%201132.26%201138.78%20L%201029.17%20990.62%20L%201022.40%20792.51%20L%201064.92%20582.79%20L%201233.60%20524.92%20L%201427.74%20540.41%20Z%22%20fill%3D%22%23B6B8FD%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%20980.99%20-178.48%20L%201293.26%20-180.72%20L%201536.56%2085.36%20L%201599.77%20355.85%20L%201324.59%20616.47%20L%201042.36%20658.34%20L%20584.34%20592.41%20L%20558.87%20253.92%20L%20540.42%20-120.33%20Z%22%20fill%3D%22%23609EFF%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%201593.45%20718.94%20L%201631.23%201042.04%20L%201593.14%201357.25%20L%201360.25%201637.12%20L%201221.61%201737.68%20L%20979.34%201596.60%20L%20840.86%201260.99%20L%20820.33%20900.51%20L%201009.87%20694.62%20L%201195.89%20552.88%20L%201366.69%20627.51%20Z%22%20fill%3D%22%23609EFF%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%20-301.15%201027.24%20L%20-417.88%201157.23%20L%20-561.82%201192.97%20L%20-760.69%201213.37%20L%20-847.34%201005.54%20L%20-940.05%20806.73%20L%20-853.62%20628.73%20L%20-639.52%20611.61%20L%20-446.69%20552.61%20L%20-303.42%20650.36%20L%20-207.56%20848.65%20Z%22%20fill%3D%22%23FB847C%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22%23FFFFFF%22%20filter%3D%22url(%23grain)%22%20opacity%3D%220.65%22%2F%3E%3C%2Fsvg%3E)
Code Output
{/* Tailwind + inline style for mesh gradient */}
<div
className="w-full h-64 bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221920%22%20height%3D%221080%22%20viewBox%3D%220%200%201920%201080%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22blur%22%20x%3D%22-1091%22%20y%3D%22-775%22%20width%3D%223311%22%20height%3D%222663%22%20filterUnits%3D%22userSpaceOnUse%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2275%22%2F%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22grain%22%20x%3D%22-1091%22%20y%3D%22-775%22%20width%3D%223311%22%20height%3D%222663%22%20filterUnits%3D%22userSpaceOnUse%22%20primitiveUnits%3D%22userSpaceOnUse%22%20color-interpolation-filters%3D%22linearRGB%22%3E%0A%09%09%09%09%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.2%22%20numOctaves%3D%224%22%20seed%3D%2215%22%20stitchTiles%3D%22no-stitch%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221920%22%20height%3D%221080%22%20result%3D%22turbulence%22%2F%3E%0A%09%09%09%09%3CfeSpecularLighting%20surfaceScale%3D%2210%22%20specularConstant%3D%221.21%22%20specularExponent%3D%2220%22%20lighting-color%3D%22%23fff%22%20x%3D%220%22%20y%3D%220%22%20width%3D%221920%22%20height%3D%221080%22%20in%3D%22turbulence%22%20result%3D%22specularLighting%22%3E%0A%09%09%09%09%09%3CfeDistantLight%20azimuth%3D%223%22%20elevation%3D%22100%22%2F%3E%0A%09%09%09%09%3C%2FfeSpecularLighting%3E%0A%09%09%09%3C%2Ffilter%3E%3C%2Fdefs%3E%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M%20927.18%201591.94%20L%20478.57%201233.66%20L%20363.88%20899.70%20L%20463.94%20519.79%20L%20808.55%20245.45%20L%201281.48%20617.51%20L%201440.49%20811.37%20L%201322.19%201403.75%20Z%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%201708.24%20970.63%20L%201456.01%20999.07%20L%201312.87%20920.84%20L%201223.78%20835.88%20L%201144.21%20723.65%20L%201242.69%20611.00%20L%201337.90%20458.50%20L%201475.98%20427.74%20L%201716.04%20432.41%20L%201889.55%20491.90%20L%202014.55%20646.11%20L%201996.39%20786.67%20L%201852.77%20930.89%20Z%22%20fill%3D%22%23FCB055%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%20395.70%20803.85%20L%20276.48%20702.35%20L%2099.96%2095.23%20L%20204.77%20-348.54%20L%20417.94%20-569.64%20L%20695.46%20-624.62%20L%201147.10%20-356.97%20L%201055.36%2017.30%20L%201093.84%20604.52%20L%20944.89%20929.54%20Z%22%20fill%3D%22%23FCB055%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%201487.56%20640.75%20L%201585.78%20817.92%20L%201556.79%20937.18%20L%201476.70%201077.82%20L%201311.87%201084.86%20L%201132.26%201138.78%20L%201029.17%20990.62%20L%201022.40%20792.51%20L%201064.92%20582.79%20L%201233.60%20524.92%20L%201427.74%20540.41%20Z%22%20fill%3D%22%23B6B8FD%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%20980.99%20-178.48%20L%201293.26%20-180.72%20L%201536.56%2085.36%20L%201599.77%20355.85%20L%201324.59%20616.47%20L%201042.36%20658.34%20L%20584.34%20592.41%20L%20558.87%20253.92%20L%20540.42%20-120.33%20Z%22%20fill%3D%22%23609EFF%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%201593.45%20718.94%20L%201631.23%201042.04%20L%201593.14%201357.25%20L%201360.25%201637.12%20L%201221.61%201737.68%20L%20979.34%201596.60%20L%20840.86%201260.99%20L%20820.33%20900.51%20L%201009.87%20694.62%20L%201195.89%20552.88%20L%201366.69%20627.51%20Z%22%20fill%3D%22%23609EFF%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Cpath%20d%3D%22M%20-301.15%201027.24%20L%20-417.88%201157.23%20L%20-561.82%201192.97%20L%20-760.69%201213.37%20L%20-847.34%201005.54%20L%20-940.05%20806.73%20L%20-853.62%20628.73%20L%20-639.52%20611.61%20L%20-446.69%20552.61%20L%20-303.42%20650.36%20L%20-207.56%20848.65%20Z%22%20fill%3D%22%23FB847C%22%20fill-opacity%3D%221%22%20filter%3D%22url(%23blur)%22%2F%3E%3Crect%20width%3D%221920%22%20height%3D%221080%22%20fill%3D%22%23FFFFFF%22%20filter%3D%22url(%23grain)%22%20opacity%3D%220.65%22%2F%3E%3C%2Fsvg%3E")`,
}}
/>Choose a Palette
Full Gradient Editor
Need more control? Open the full editor to fine-tune colors, shapes, blur, grain, and export in any format — PNG, WebP, SVG, or CSS.
Open Gradient EditorWhy Mesh Gradients for Tailwind CSS?
Tailwind CSS provides utility classes for linear and radial gradients (bg-gradient-to-r, from-blue-500, to-purple-600), but these only support simple two or three-color transitions. Mesh gradients blend multiple colored shapes with blur effects to create organic, complex color transitions that are impossible to achieve with Tailwind's built-in gradient utilities alone.
How to Use Mesh Gradients in Tailwind Projects
This generator creates mesh gradients as SVG data URLs. Since Tailwind doesn't have utility classes for mesh gradients, the tool provides four ways to integrate them: inline styles for quick prototyping, custom CSS classes for reusable styles in your globals.css, React components for component-based architectures, and arbitrary values for one-off usage. Choose the format that best fits your project structure.
Inline Style vs Custom CSS Class
For most Tailwind projects, the inline style approach is the fastest — paste the JSX directly into your component. For reusable gradients across multiple components, create a custom CSS class inside @layer components in your globals.css file. This keeps your JSX clean and lets you combine the gradient class with other Tailwind utilities like rounded-lg, shadow-xl, or p-8.
Performance Considerations
Mesh gradients are rendered as SVG embedded in data URLs. For production use, consider saving the SVG as a static file and referencing it with a URL instead of inlining the data. This improves caching, reduces HTML size, and is better for performance. You can download the SVG file from the full editor and serve it from your public/ directory or a CDN.
Looking for other gradient tools? Try our Random Gradient Generator for quick inspiration, or our Text Gradient Generator to apply mesh gradients directly to text.