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 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

🤔: 59-62 💰:4.1

🤔: 68 ⭐️ 💰:10.0

🤔: 49-57 💰:1.8

🤔: 51 💰:10

🤔: 41 💰:6.9 🔍

🤔: 41 💰:6.7

🤔: 36 💰:1.2 🔍

🤔: 36 💰:1.1

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

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 Docs

AI Boards

AI Tutor

Grammar Checker

Extract Text from Image

AI Image Generator

Inpaint

Image to Prompt

Chat PDF

Fix Hands

PDF to Text

Language Translator

Code Improver

Blog Post Writer

Magic Prompt

Email Writer

AI Game Generator

Remove Background

Image to Video Maker

Upscale

Change Photo Background

Logo Art Generator

Photo Translator

Cover Letter Writer

Function Writer

Photo Object Remover

Website Wizard

Selfie Refiner

Code Generator

HTML to Image

Outcrop Image

Icon Maker

Code Translator

Prompt Interpolator

Video Ad Script Writer

Infinite Zoom

Social Media Post Writer

AI Actors

Speech to Text

Remove Video Background

Essay Grader

Video to MP3

Video to Video

Portrait Maker

Plant Doctor

Video Ad Maker

Design to Code

LinkedIn Headshot Maker

URL to Screenshots

AI Meeting Note Taker

Website Improvement Suggester

Grand Slam Offer Generator

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 Display Ad Maker | API by Spyce