The HTML embed is a small script that draws your gradient live on the page. It has no libraries to load, it pauses when it scrolls out of view, and it shows a still frame to visitors who prefer reduced motion. Most sites can add it in about two minutes.
Make and copy the embed
- Open the editor and make your gradient, or start from a style.
- Click Export, open the Code tab and choose HTML Embed.
- Click Copy.
Free embeds carry a small "Made with Mesh Gradient Studio" link in the corner. Pro embeds have none.
Give it a box with a height
The gradient fills the box you paste it into. A box with no height shows nothing, which is the most common reason an embed "does not work". Set a height on the block, like 480px, or a minimum height on the section.
Put text on top
To use the gradient as a section background, wrap it and lay your content over it:
<div style="position:relative; min-height:480px;">
<!-- Paste the Mesh Gradient Studio embed here, inside this wrapper -->
<div style="position:absolute; inset:0;">
...embed code...
</div>
<!-- Your content sits on top -->
<div style="position:relative; padding:64px 24px; color:#fff;">
<h1>Your headline</h1>
</div>
</div>Where to paste it
- Plain HTML: paste it where the gradient should appear.
- Webflow: add a Code Embed element, paste, then give the element a height.
- Framer: insert an Embed, switch it to HTML, paste, and size the frame.
- WordPress: add a Custom HTML block in the block editor and paste.
- Squarespace: add a Code block and paste.
- Wix: add Embed Code, choose Embed HTML, paste, and drag it to size.
- Shopify: in the theme editor, add a Custom Liquid section and paste.
Some builders only run custom code on paid plans or in published pages, not in their preview. If nothing shows in the builder, publish the page and check the live site.
Want a still image instead?
Export a PNG (up to 2x free, 4x on Pro) and use it as a normal background image. It loads anywhere, including email.