Display ads made easy. Create professional-quality, bespoke, animated HTML5 display ads without any experience.

State-of-the-art AI animated HTML display ad generator.

AI HTML5 Display Ad Maker

Tip: Tell the AI as much or as little as you want about the elements of the ad. You can specify titles, button text, colors, styles, intended audience, etc...

Your Ad Request

Ad Reviser System Message

Advanced

Create a more engaging ad with CSS animations.

Animate Ad

Describe what kind of animations you'd like to see in the ad.

Animation Details

Upload any image you want to use as a background.

Background Photo (optional)

Improve Claude's intelligence score from 49 to 57

Enable Claude extended thinking

Set a limit on the number of tokens Claude can use for extended thinking. Claude is unlikely to use more than 30,000 even if you set this higher.

Claude thinking budget (in tokens)

Height (px)

Width (px)

DALL-E 3 Quality

Dimensions

300 x 250

728 x 90

300 x 600

160 x 600

336 x 280

970 x 90

468 x 60

250 x 250

200 x 200

320 x 50

320 x 100

300 x 50

300 x 300

1280 x 720

1080 x 1920

1080 x 1350

Custom width and height

We recommend Claude or smarter, but you can try Gemini 2.0 to save credits and test out ideas.

First Draft Ad Generator AI model

🤔: 48 💰:1.0

🤔: 60 💰:1.5

🏆 🤔: 68 💰:37.5

🤔: 67 💰:100.0

🏆 🤔: 70 💰:11.0

🤔: 49-57 💰:8.4

🤔: 41 💰:6.9 🔍

🤔: 59-62 💰:150.0

🤔: 41 💰:25.0

🤔: 36 💰:1.5

This tool will be used to generate images if needed to complete your ad. DALL·E 3 recommended.

Image Generation AI Model

This AI vision model will look at your ad output and make revisions for you.

Reviser AI model

Your Logo (optional)

Number of Unique Ads

Output all draft revisions

Generate privately

Upload any foreground photos(s) you want included in the ad.

Your Product Photo(s) (optional)

Tip: Switch to high for best results. It will use more tokens thinking.

Reasoning effort

Simple questions

Intelligence: +2

Intelligence: +3

Show the AI what you like. The AI will try to match the font, colors, and layout of this reference ad.

Tip: Do a web search for 'display ad examples' to find more successful ads you like.

Reference Ad (optional)

Recommended: 1+. Increase for more visually polished ads. After generating the first version of the ad, AI will review it's own work and make improvements.

Tip: you can easily ask for the AI to make specific changes to any ad after it's generated. This setting just gives the AI a chance to tidy up obvious errors and style issues in the HTML.

Revisions Count

Increase the size of the ad to make it more readable on a high-resolution screens. 1 is normal size, 2 is double size, 3 is triple size. Used for image & video versions of the ad.

Scale Factor

How much web content do you want the AI to retrieve?

Web search context size

Faster and cheaper

Good balance

Most comprehensive

System Message

HTML5 Display Ad Maker

Create Display Ad

Question Answerer

AI Researcher

Essay Writer

AI Chat

Writing Improver

Redraw Image

Photo Analyzer

Fill in the Blanker

Image Trace

AI Image Generator

Grammar Checker

AI Tutor

AI Docs

AI Boards

Extract Text from Image

Inpaint

Chat PDF

Image to Prompt

Fix Hands

PDF to Text

Language Translator

Code Improver

Blog Post Writer

Email Writer

AI Game Generator

Magic Prompt

Remove Background

Image to Video

Change Photo Background

Upscale

Logo Art Generator

Photo Translator

Cover Letter Writer

Photo Object Remover

Function Writer

Website Wizard

Code Generator

Selfie Refiner

HTML to Image

Extract From Page

Outcrop Image

Icon Maker

Code Translator

Prompt Interpolator

URL to Screenshots

Design to Code

Speech to Text

Infinite Zoom

Social Media Post Writer

Essay Grader

AI Actors

Remove Video Background

Video to MP3

CSV Analyzer

Plant Doctor

Video to Video

AI Agent

Portrait Maker

Website Improvement Suggester

LinkedIn Headshot Maker

AI Meeting Note Taker

AI Video Generator

Browser Agent

Text to Music

Google Ad Creator

AI Product Photo Generator

Google Ad Improver

Video Ad Maker

Video Ad Script Writer

Ad Headline Writer

Differentiated Offer Generator

Content Calendar Generator

Bulk Social Media Producer

Display Ad Improver

PDF to JPG

<html>
<head>
  <meta charset="UTF-8">
  <title>Adtastic.ai Display Ad</title>
  <script>
    // You can add any tracking or animation scripts here if desired
  </script>
  <style>
    html, body {
      margin: 0; 
      padding: 0;
    }
    #ad-container {
      width: 30vw;
      height: 30vw;
      position: relative;
      overflow: hidden;
      background-color: #ffffff;
      font-family: "Arial", sans-serif;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
    }
    .logo {
      position: absolute;
      top: 3vh;
      left: 3vw;
      height: 6vh;
      z-index: 1;
    }
    .headline {
      position: absolute;
      top: 12vh;
      left: 3vw;
      width: 80%;
      font-weight: bold;
      color: #000000;
      font-size: 2.5vw;
      line-height: 1.2;
      z-index: 2;
    }
    .subtext {
      position: absolute;
      top: 20vh;
      left: 3vw;
      width: 80%;
      font-size: 1.5vw;
      color: #555555;
      line-height: 1.3;
      z-index: 2;
    }
    .cta-button {
      position: absolute;
      bottom: 5vh;
      left: 3vw;
      background-color: #2F6AEF;
      color: #ffffff;
      padding: 1vh 2vw;
      font-size: 1.5vw;
      border: none;
      cursor: pointer;
      z-index: 3;
    }
    .bg-graphic {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id="ad-container">
    <img 
      src="https://firebasestorage.googleapis.com/v0/b/turbo-math.appspot.com/o/user-assets%2FgzMWmegNKSUlh64nFjBAIuqhqGr2%2F03-17-2025%2FuserUpload%2Fai-file_gzMWmegNKSUlh64nFjBAIuqhqGr2_a8eeb9c0-0380-11f0-b562-5189919654cfadtasticLongLogo%403x.png?alt=media&token=16853f1e-f3de-4b24-bc4b-6586a3f3aed9"
      class="logo"
      alt="Adtastic.ai Logo"
    />
    <div class="headline">The Best AI Display Ad Maker</div>
    <div class="subtext">Power your ads with AI and boost conversions.</div>
    <button class="cta-button">Try It Free</button>
    <img 
      src="https://storage.googleapis.com/turbo-math.appspot.com/user-assets%2FgzMWmegNKSUlh64nFjBAIuqhqGr2%2F03-27-2025%2Fai-image-generator%2Fai-image-generator_892ae478-75dc-4271-8783-270a9226ea3b_0_1743043993669.png" 
      class="bg-graphic"
      width="100px"
      height="100px"
      alt="Illustration"
    />
  </div>
</body>
</html>

Ad 1 draft 0

<html>
<head>
  <meta charset="UTF-8">
  <title>Adtastic.ai Display Ad</title>
  <style>
    /* Use a Google Font for a clean, modern look */
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
    
    html, body {
      margin: 0;
      padding: 0;
    }
    #ad-container {
      width: 300px;
      height: 300px;
      position: relative;
      overflow: hidden;
      background-color: #ffffff;
      font-family: 'Montserrat', sans-serif;
    }
    .logo {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 80px;
      height: auto;
      z-index: 2;
    }
    .headline {
      position: absolute;
      top: 60px;
      left: 10px;
      width: 120px;
      font-weight: 700;
      font-size: 16px;
      color: #000000;
      line-height: 1.3;
      z-index: 3;
    }
    .subtext {
      position: absolute;
      top: 100px;
      left: 10px;
      width: 120px;
      font-size: 12px;
      color: #555555;
      line-height: 1.35;
      z-index: 3;
    }
    .cta-button {
      position: absolute;
      left: 10px;
      bottom: 10px;
      font-size: 14px;
      padding: 8px 12px;
      background-color: #2F6AEF;
      color: #ffffff;
      border: none;
      cursor: pointer;
      z-index: 3;
      border-radius: 3px;
    }
    /* Full-height image on the right, matching reference ad style */
    .right-illustration {
      position: absolute;
      top: 0;
      right: 0;
      width: 160px;
      height: 300px;
      object-fit: cover;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id="ad-container">
    
    <img 
      src="https://firebasestorage.googleapis.com/v0/b/turbo-math.appspot.com/o/user-assets%2FgzMWmegNKSUlh64nFjBAIuqhqGr2%2F03-17-2025%2FuserUpload%2Fai-file_gzMWmegNKSUlh64nFjBAIuqhqGr2_a8eeb9c0-0380-11f0-b562-5189919654cfadtasticLongLogo%403x.png?alt=media&token=16853f1e-f3de-4b24-bc4b-6586a3f3aed9"
      class="logo"
      alt="Adtastic.ai Logo"
    />
    <div class="headline">The Best AI Display Ad Maker</div>
    <div class="subtext">Power your ads with AI and boost conversions.</div>
    <button class="cta-button">Try It Free</button>
    
    <img
      src="https://storage.googleapis.com/turbo-math.appspot.com/user-assets%2FgzMWmegNKSUlh64nFjBAIuqhqGr2%2F03-27-2025%2Fai-image-generator%2Fai-image-generator_8cbc72e6-cba6-4ab3-917d-6f3784653270_0_1743044056378.png"
      alt="Illustration"
      class="right-illustration"
    />
  </div>
</body>
</html>

Ad 1 revision 1

<html>
<head>
  <meta charset="UTF-8">
  <title>Adtastic.ai Display Ad</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
    
    html, body {
      margin: 0;
      padding: 0;
    }
    #ad-container {
      width: 300px;
      height: 300px;
      position: relative;
      overflow: hidden;
      background-color: #FFFFFF;
      font-family: 'Montserrat', sans-serif;
    }
    /* Left side text container */
    .text-container {
      position: absolute;
      left: 0;
      top: 0;
      width: 140px;
      height: 300px;
      padding: 10px;
      box-sizing: border-box;
      z-index: 2;
    }
    .logo {
      display: block;
      width: 80px;
      height: auto;
      margin-bottom: 10px;
    }
    .headline {
      font-weight: 700;
      font-size: 18px;
      color: #000000;
      line-height: 1.3;
      margin-bottom: 8px;
    }
    .subtext {
      font-size: 13px;
      color: #555555;
      line-height: 1.35;
      margin-bottom: 12px;
    }
    .cta-button {
      font-size: 14px;
      padding: 8px 12px;
      background-color: #2F6AEF;
      color: #ffffff;
      border: none;
      cursor: pointer;
      border-radius: 3px;
    }
    /* Full-height image on the right */
    .right-illustration {
      position: absolute;
      top: 0;
      right: 0;
      width: 160px;
      height: 300px;
      object-fit: cover;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id="ad-container">
    <div class="text-container">
      
      <img 
        src="https://firebasestorage.googleapis.com/v0/b/turbo-math.appspot.com/o/user-assets%2FgzMWmegNKSUlh64nFjBAIuqhqGr2%2F03-17-2025%2FuserUpload%2Fai-file_gzMWmegNKSUlh64nFjBAIuqhqGr2_a8eeb9c0-0380-11f0-b562-5189919654cfadtasticLongLogo%403x.png?alt=media&token=16853f1e-f3de-4b24-bc4b-6586a3f3aed9"
        class="logo"
        alt="Adtastic.ai Logo"
      />
      <div class="headline">The Best AI Display Ad Maker</div>
      <div class="subtext">Power your ads with AI and boost conversions.</div>
      <button class="cta-button">Try It Free</button>
    </div>
    
    <img
      src="https://storage.googleapis.com/turbo-math.appspot.com/user-assets%2FgzMWmegNKSUlh64nFjBAIuqhqGr2%2F03-27-2025%2Fai-image-generator%2Fai-image-generator_9e529321-b6a3-430a-b16e-6910229a8632_0_1743044135639.png"
      alt="Landing page illustration"
      class="right-illustration"
      width="160px"
      height="300px"
    />
  </div>
</body>
</html>

Ad 1 revision 2

<html>
<head>
  <meta charset="UTF-8">
  <title>Adtastic.ai Display Ad</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
    
    html, body {
      margin: 0;
      padding: 0;
    }
    #ad-container {
      width: 300px;
      height: 300px;
      position: relative;
      overflow: hidden;
      background-color: #FFFFFF;
      font-family: 'Montserrat', sans-serif;
    }
    /* Left side text container */
    .text-container {
      position: absolute;
      left: 0;
      top: 0;
      width: 140px;
      height: 300px;
      padding: 10px;
      box-sizing: border-box;
      z-index: 2;
    }
    .logo {
      display: block;
      width: 80px;
      height: 22px;
      margin-bottom: 10px;
    }
    .headline {
      font-weight: 700;
      font-size: 18px;
      color: #000000;
      line-height: 1.3;
      margin-bottom: 8px;
      /* CSS Animation for headline */
      opacity: 0;
      transform: translateY(20px);
      animation: fadeSlideIn1 0.8s ease-out 0.5s forwards;
    }
    .subtext {
      font-size: 13px;
      color: #555555;
      line-height: 1.35;
      margin-bottom: 12px;
      /* CSS Animation for subtext */
      opacity: 0;
      transform: translateY(20px);
      animation: fadeSlideIn2 0.8s ease-out 0.9s forwards;
    }
    .cta-button {
      font-size: 14px;
      padding: 8px 12px;
      background-color: #2F6AEF;
      color: #ffffff;
      border: none;
      cursor: pointer;
      border-radius: 3px;
    }
    /* Full-height image on the right */
    .right-illustration {
      position: absolute;
      top: 0;
      right: 0;
      width: 160px;
      height: 300px;
      object-fit: cover;
      z-index: 1;
      /* Slow zoom animation */
      animation: slowZoom 8s linear forwards;
    }

    /* Keyframes for text animations */
    @keyframes fadeSlideIn1 {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @keyframes fadeSlideIn2 {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* Keyframes for slow zoom */
    @keyframes slowZoom {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(1.1);
      }
    }
  </style>
</head>
<body>
  <div id="ad-container">
    <div class="text-container">
      
      <img 
        src="https://firebasestorage.googleapis.com/v0/b/turbo-math.appspot.com/o/user-assets%2FgzMWmegNKSUlh64nFjBAIuqhqGr2%2F03-17-2025%2FuserUpload%2Fai-file_gzMWmegNKSUlh64nFjBAIuqhqGr2_a8eeb9c0-0380-11f0-b562-5189919654cfadtasticLongLogo%403x.png?alt=media&token=16853f1e-f3de-4b24-bc4b-6586a3f3aed9"
        class="logo"
        alt="Adtastic.ai Logo"
      />
      <div class="headline">The Best AI Display Ad Maker</div>
      <div class="subtext">Power your ads with AI and boost conversions.</div>
      <button class="cta-button">Try It Free</button>
    </div>
    <img
      src="https://storage.googleapis.com/turbo-math.appspot.com/user-assets%2FgzMWmegNKSUlh64nFjBAIuqhqGr2%2F03-27-2025%2Fai-image-generator%2Fai-image-generator_9e529321-b6a3-430a-b16e-6910229a8632_0_1743044135639.png"
      alt="Landing page illustration"
      class="right-illustration"
      width="160px"
      height="300px"
    />
  </div>
</body>
</html>

AI HTML5 Display Ad Maker | API by Spyce