1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="width=device-width" data-next-head=""/>
vendor: 66 bytes, line 1
1<script async="" src="https://www.googletagmanager.com/gtag/js?id=
1G-DTZQJYKX6E
vendor: 11 bytes, line 1
1"></script>
1<title data-next-head="">Free OG Image Generator | Super Designer</title><meta name="description" content="Create beautiful Open Graph images for social sharing. Pick from 10 templates, customize text, colors, and backgrounds." data-next-head=""/><link rel="canonical" href="https://superdesigner.co/tools/og-image" data-next-head=""/><meta property="og:type" content="website" data-next-head=""/><meta property="og:url" content="https://superdesigner.co/tools/og-image" data-next-head=""/><meta property="og:title" content="Free OG Image Generator | Super Designer" data-next-head=""/><meta property="og:description" content="Create beautiful Open Graph images for social sharing. Pick from 10 templates, customize text, colors, and backgrounds." data-next-head=""/><meta property="og:image" content="https://superdesigner.co/og/og_og_image.png" data-next-head=""/><meta property="twitter:card" content="summary_large_image" data-next-head=""/><meta property="twitter:url" content="https://superdesigner.co/tools/og-image" data-next-head=""/><meta property="twitter:title" content="Free OG Image Generator | Super Designer" data-next-head=""/><meta property="twitter:description" content="Create beautiful Open Graph images for social sharing. Pick from 10 templates, customize text, colors, and backgrounds." data-next-head=""/><meta property="twitter:image" content="https://superdesigner.co/og/og_og_image.png" data-next-head=""/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"/><link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png"/><link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png"/><link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png"/><link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png"/><link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png"/><link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png"/><link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png"/><link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png"/><link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png"/><link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"/><meta name="msapplication-TileColor" content="#ffffff"/><meta name="msapplication-TileImage" content="/ms-icon-144x144.png"/><meta name="theme-color" content="#ffffff"/><link rel="preload" href="/_next/static/chunks/00soxvmvv~b-m.css" as="style"/>
1<script type="application/ld+json" data-next-head="">{"@context":"https://schema.org","@type":"WebApplication","name":"Free OG Image Generator | Super Designer","description":"Create beautiful Open Graph images for social sharing. Pick from 10 templates, customize text, colors, and backgrounds.","url":"https://superdesigner.co/tools/og-image","applicationCategory":"DesignApplication","operatingSystem":"Web","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"datePublished":"2024-01-01","dateModified":"2026-05-27"}</script>
1<script type="application/ld+json" data-next-head="">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://superdesigner.co"},{"@type":"ListItem","position":2,"name":"Tools","item":"https://superdesigner.co/tools"},{"@type":"ListItem","position":3,"name":"Free OG Image Generator","item":"https://superdesigner.co/tools/og-image"}]}</script>
1<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
1<script>
vendor: 182 bytes, lines 1-5
1window.dataLayer = window.dataLayer || []; 2 function gtag(){dataLayer.push(arguments);} 3 gtag('js', new Date()); 4 5 gtag('config', '
5G-DTZQJYKX6E
vendor: 3 bytes, line 5
5');
5</script>
5<script>
vendor: 136 bytes, lines 5-7
5(function(h,o,t,j,a,r){ 6 h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; 7 h._hjSettings={hjid:
73105589
vendor: 297 bytes, lines 7-12
7,hjsv:6}; 8 a=o.getElementsByTagName('head')[0]; 9 r=o.createElement('script');r.async=1; 10 r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; 11 a.appendChild(r); 12 })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
12</script>
12<link rel="stylesheet" href="/_next/static/chunks/00soxvmvv~b-m.css" data-n-g=""/><noscript data-n-css=""></noscript>
12<script src="/_next/static/chunks/14l27ulnb0xz8.js" defer=""></script>
12<script src="/_next/static/chunks/0u6xjc6qdrfjw.js" defer=""></script>
12<script src="/_next/static/chunks/00i6ja_.g9ss0.js" defer=""></script>
12<script src="/_next/static/chunks/0pg9h4netszvn.js" defer=""></script>
12<script src="/_next/static/chunks/turbopack-08py6mvy9~-7p.js" defer=""></script>
12<script src="/_next/static/chunks/0gulefllqjdaj.js" defer=""></script>
12<script src="/_next/static/chunks/0kjwx0xhvs5pg.js" defer=""></script>
12<script src="/_next/static/chunks/01hl7_ht1h5_x.js" defer=""></script>
12<script src="/_next/static/chunks/0oed-w1c_g1wc.js" defer=""></script>
12<script src="/_next/static/chunks/0z987rgs25s1d.js" defer=""></script>
12<script src="/_next/static/chunks/0dw.~~c3hminz.js" defer=""></script>
12<script src="/_next/static/chunks/0kxysj65agr1e.js" defer=""></script>
12<script src="/_next/static/chunks/08659tin~8pth.js" defer=""></script>
12<script src="/_next/static/chunks/turbopack-17ee44irmv64m.js" defer=""></script>
12<script src="/_next/static/HZM18sQ9j-ViJyJqVP_qT/_buildManifest.js" defer=""></script>
12<script src="/_next/static/HZM18sQ9j-ViJyJqVP_qT/_ssgManifest.js" defer=""></script>
12<script src="/_next/static/HZM18sQ9j-ViJyJqVP_qT/_clientMiddlewareManifest.js" defer=""></script>
12</head><body><link rel="preload" as="image" href="/logo.svg"/><link rel="preload" as="image" href="https://i.pravatar.cc/32?img=67"/><link rel="preload" as="image" href="https://picsum.photos/seed/workspace/160/200"/><link rel="preload" as="image" href="https://i.pravatar.cc/80?img=67"/><link rel="preload" as="image" href="https://picsum.photos/seed/swissalps/320/170"/><link rel="preload" as="image" href="/drone.gif"/><link rel="preload" as="image" href="/x_dark.svg"/><div id="__next">
12<script>((e,i,s,u,m,a,l,h)=>{let d=document.documentElement,w=["light","dark"];function p(n){(Array.isArray(e)?e:[e]).forEach(y=>{let k=y==="class",S=k&&a?m.map(f=>a[f]||f):m;k?(d.classList.remove(...S),d.classList.add(a&&a[n]?a[n]:n)):d.setAttribute(y,n)}),R(n)}function R(n){h&&w.includes(n)&&(d.style.colorScheme=n)}function c(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}if(u)p(u);else try{let n=localStorage.getItem(i)||s,y=l&&n==="system"?c():n;p(y)}catch(n){}})("class","theme","system",null,["light","dark"],null,true,true)</script>
12<div class="flex flex-col bg-slate-100 dark:bg-slate-900"><div class="sm:h-screen sm:overflow-y-hidden"><h1 class="sr-only">Free OG Image Generator</h1><header class="sticky top-0 z-50 backdrop-blur-md bg-white/80 dark:bg-slate-900/80 border-b border-slate-100 dark:border-slate-800 transition-shadow duration-300 shadow-none" style="opacity:0;transform:translateY(-10px)"><div class="flex flex-wrap sm:px-4 py-3 flex-row items-center max-w-screen-2xl mx-auto"><a class="flex title-font font-medium items-center text-slate-900 mb-0 sm:pl-2" href="/"><img class="w-10 h-10" src="/logo.svg" alt="Super Designer logo"/></a><nav class="ml-auto flex flex-wrap items-center text-base justify-center pr-1 gap-1"><div class="px-3 w-10 h-10"></div><div class="relative"><button type="button" class="flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800">Resources<svg class="w-3.5 h-3.5 text-slate-400 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></button></div><div class="relative"><button type="button" class="flex items-center gap-1 px-3 py-2 text-sm font-medium rounded-lg transition-colors text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800">Tools<svg class="w-3.5 h-3.5 text-slate-400 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg></button></div><div class="pl-4 flex flex-row flex-wrap"><button type="button" class="focus:outline-none py-2 px-5 rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 transition-colors font-medium" tabindex="0">Export</button></div></nav></div></header><div class="app"><div class="flex flex-col md:flex-row justify-center h-full gap-0"><div class="w-full sm:w-9/12 sm:mt-0 mt-1 sm:h-full flex flex-col sm:flex-row justify-center items-center"><div class="flex flex-col w-full h-full"><div class="w-full relative bg-white dark:bg-slate-900 border-b border-slate-100 dark:border-slate-800"><div class="w-full overflow-x-auto" style="scrollbar-width:none;-ms-overflow-style:none"><div class="flex flex-row gap-2 px-4 py-3 w-max"><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-2 ring-indigo-500 ring-offset-2 ring-offset-white dark:ring-offset-slate-900 shadow-lg shadow-indigo-500/15 scale-[1.02]" style="background:linear-gradient(180deg, #09090b, #18181b)"><div class="absolute inset-0 flex flex-col justify-between p-2.5"><img src="/logo.svg" style="height:7px;width:auto;object-fit:contain;flex-shrink:0" alt=""/><div class="flex flex-col gap-1"><div class="w-5 h-[2px] rounded bg-gradient-to-r from-indigo-500 to-transparent"></div><div class="w-24 h-1.5 rounded bg-white/70"></div><div class="w-16 h-1 rounded bg-white/20"></div></div></div><div class="absolute top-2 right-2 w-[18px] h-[18px] rounded-full bg-indigo-500 flex items-center justify-center shadow-sm shadow-indigo-700/40"><svg width="9" height="9" viewBox="0 0 10 10" fill="none"><path d="M2 5l2.5 2.5L8 3" stroke="white" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-indigo-600 dark:text-indigo-400">Dark Landing</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:linear-gradient(160deg, #0f172a, #1e293b)"><div class="absolute inset-0 flex flex-col justify-between p-2.5"><div class="flex flex-col gap-0.5">
12<div class="px-1 py-[2px] rounded bg-sky-400/15 border border-sky-400/30 w-fit"><div class="w-6 h-[3px] rounded bg-sky-400/70"></div></div><div class="w-24 h-1.5 rounded bg-white/70 mt-0.5"></div><div class="w-18 h-1 rounded bg-white/20"></div></div><div class="flex items-center justify-between"><div class="flex items-center gap-1"><img src="https://i.pravatar.cc/32?img=67" class="w-4 h-4 rounded-full object-cover flex-shrink-0" alt=""/><div class="w-8 h-[3px] rounded bg-white/20"></div></div><img src="/logo.svg" style="height:7px;width:auto;object-fit:contain;flex-shrink:0" alt=""/></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300">Article</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:linear-gradient(135deg, #0f172a, #1e293b)"><div class="absolute left-0 top-0 bottom-0 w-[55%] flex flex-col justify-between p-2.5"><div class="flex items-center gap-1"><img src="/logo.svg" style="height:7px;width:auto;object-fit:contain;flex-shrink:0" alt=""/><div class="px-1 py-[2px] rounded bg-indigo-500/20"><div class="w-3 h-[3px] rounded bg-indigo-400/70"></div></div></div><div class="flex flex-col gap-0.5"><div class="w-16 h-1.5 rounded bg-white/70"></div><div class="w-12 h-1 rounded bg-white/20"></div></div><div class="w-4 h-[2px] rounded bg-indigo-500/50"></div></div><div class="absolute right-0 top-0 bottom-0 w-[45%] overflow-hidden"><img src="https://picsum.photos/seed/workspace/160/200" class="w-full h-full object-cover" alt=""/><div class="absolute inset-0 bg-gradient-to-l from-transparent to-[#0f172a]/40"></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300">Split Image</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:linear-gradient(180deg, #18181b, #27272a)"><div class="absolute inset-0 flex flex-col items-center justify-center px-4 gap-0.5"><span class="text-purple-400/50 text-sm font-serif leading-none mb-0.5">â</span><div class="w-24 h-1 rounded bg-white/70"></div><div class="w-20 h-1 rounded bg-white/70"></div><div class="flex items-center gap-1 mt-1"><img src="https://i.pravatar.cc/32?img=67" class="w-3 h-3 rounded-full object-cover flex-shrink-0" alt=""/><div class="w-10 h-[3px] rounded bg-white/20"></div></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300">Quote</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:linear-gradient(135deg, #0f0f1a, #1a1a2e)"><div class="absolute inset-0 flex flex-row items-center px-2.5 gap-2.5"><img src="https://i.pravatar.cc/80?img=67" class="w-8 h-8 rounded-full object-cover flex-shrink-0 ring-1 ring-indigo-400/20" alt=""/><div class="flex flex-col gap-0.5"><div class="px-1 py-[2px] rounded bg-indigo-400/15 w-fit"><div class="w-6 h-[3px] rounded bg-indigo-400/60"></div></div><div class="w-14 h-1.5 rounded bg-white/70 mt-0.5"></div><div class="w-20 h-1 rounded bg-white/20"></div></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dar
12k:group-hover:text-slate-300">Profile</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:linear-gradient(135deg, #4f46e5, #7c3aed, #a855f7)"><div class="absolute inset-0 flex items-center justify-center p-2.5"><div class="w-[85%] h-[82%] rounded-lg bg-white/10 border border-white/20 flex flex-col items-center justify-center gap-0.5 px-2.5"><img src="/logo.svg" style="height:8px;width:auto;object-fit:contain;flex-shrink:0" alt=""/><div class="px-1 py-[2px] rounded bg-white/15 border border-white/20 my-0.5"><div class="w-8 h-[3px] rounded bg-white/60"></div></div><div class="w-20 h-1.5 rounded bg-white/70"></div><div class="w-16 h-1 rounded bg-white/20"></div></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300">Glass Card</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:#0a0a0f"><div class="absolute inset-0 flex flex-col justify-between p-2.5"><div class="flex items-center justify-between"><img src="/logo.svg" style="height:7px;width:auto;object-fit:contain;flex-shrink:0" alt=""/><div class="px-1 py-[2px] rounded bg-emerald-500/15 border border-emerald-500/25"><div class="w-6 h-[3px] rounded bg-emerald-400/70"></div></div></div><div class="w-full h-[1px] bg-slate-600/60"></div><div class="flex flex-col gap-0.5"><div class="w-24 h-1.5 rounded bg-white/70"></div><div class="w-18 h-1 rounded bg-white/20"></div></div><div class="w-full h-[1px] bg-slate-600/60"></div><div class="w-14 h-[3px] rounded bg-white/20"></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300">Developer</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:linear-gradient(135deg, #1e293b, #0f172a)"><div class="absolute left-0 top-0 bottom-0 w-[3px] bg-indigo-500"></div><div class="absolute inset-0 flex flex-col justify-between pl-3 pr-2.5 py-2.5"><img src="/logo.svg" style="height:7px;width:auto;object-fit:contain;flex-shrink:0" alt=""/><div class="flex flex-col gap-0.5"><div class="w-22 h-1.5 rounded bg-white/70"></div><div class="w-16 h-1 rounded bg-white/20"></div></div><div class="w-12 h-[3px] rounded bg-white/20"></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300">Side Accent</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:linear-gradient(135deg, #064e3b, #065f46)"><div class="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-emerald-300 via-emerald-400 to-green-600"></div><div class="absolute inset-0 flex flex-col items-center justify-between py-2.5 px-3"><div></div><div class="flex flex-col items-center gap-0.5"><div class="w-22 h-1.5 rounded bg-white/70"></div><div class="w-16 h-1 rounded bg-white/20"></div></div><div class="flex items-center justify-between w-full"><img src="/logo.svg" style="height:7px;width:auto;object-fit:contain;flex-shrink:0" alt=""/><div class="px-1 py-[2px] rounded-full bg-white/15 border border-white/20"><div class="w-6 h-[3px] rounded bg-white/60"></div></div></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dar
12k:group-hover:text-slate-300">Launch</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:#ffffff"><div class="absolute top-0 left-0 right-0 h-[2px] bg-indigo-500"></div><div class="absolute inset-0 flex flex-col justify-between p-2.5 pt-3"><div class="flex flex-col items-end gap-0.5"><div class="w-22 h-1.5 rounded bg-slate-800/60"></div><div class="w-16 h-1 rounded bg-slate-400/25"></div></div><div class="flex items-center justify-between"><img src="/logo.svg" style="height:7px;width:auto;object-fit:contain;flex-shrink:0" alt=""/><div class="w-12 h-[3px] rounded bg-slate-300/50"></div></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300">Clean Light</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:#f8fafc"><div class="absolute top-0 left-0 right-0 h-[3px] bg-red-500"></div><div class="absolute inset-0 flex flex-col justify-between p-2.5 pt-3"><div class="flex flex-col gap-0.5"><div class="w-28 h-2 rounded bg-slate-800/60"></div><div class="w-24 h-1.5 rounded bg-slate-800/50"></div><div class="w-18 h-1.5 rounded bg-slate-800/35"></div></div><div class="flex flex-col gap-0.5"><div class="w-20 h-1 rounded bg-slate-400/25"></div><div class="flex items-center justify-between"><div class="w-10 h-[3px] rounded bg-slate-300/50"></div><img src="/logo.svg" style="height:7px;width:auto;object-fit:contain;flex-shrink:0" alt=""/></div></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300">Editorial</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:#f1f5f9"><div class="absolute inset-1.5 rounded-lg bg-white border border-slate-200 shadow-sm flex flex-col justify-between p-2"><div class="flex items-center justify-between"><img src="/logo.svg" style="height:7px;width:auto;object-fit:contain;flex-shrink:0" alt=""/><div class="px-1 py-[2px] rounded bg-indigo-50 border border-indigo-200"><div class="w-5 h-[3px] rounded bg-indigo-400/60"></div></div></div><div class="flex flex-col gap-0.5"><div class="w-22 h-1.5 rounded bg-slate-800/60"></div><div class="w-16 h-1 rounded bg-slate-400/25"></div></div><div class="w-5 h-[2px] rounded bg-indigo-500"></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300">Bordered Card</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:linear-gradient(180deg, #374151, #111827)"><img src="https://picsum.photos/seed/swissalps/320/170" class="absolute inset-0 w-full h-full object-cover" alt=""/><div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div><div class="absolute inset-0 flex flex-col justify-between p-2.5"><img src="/logo.svg" style="height:7px;width:auto;object-fit:contain;flex-shrink:0" alt=""/><div class="flex flex-col gap-0.5"><div class="w-22 h-1.5 rounded bg-white/70"></div><div class="w-16 h-1 rounded bg-white/20"></div></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dar
12k:group-hover:text-slate-300">Photo Overlay</span></button><button class="group flex flex-col items-center gap-1.5 cursor-pointer flex-shrink-0 focus:outline-none"><div class="relative w-[158px] h-[83px] rounded-xl overflow-hidden transition-all duration-200 ring-1 ring-slate-200 dark:ring-slate-700/80 hover:ring-slate-300 dark:hover:ring-slate-600 hover:shadow-md hover:scale-[1.01]" style="background:linear-gradient(160deg, #0f172a, #1e293b)"><div class="absolute inset-0 flex flex-col justify-between p-2.5"><div class="flex items-center justify-between"><img src="/logo.svg" style="height:7px;width:auto;object-fit:contain;flex-shrink:0" alt=""/><div class="px-1 py-[2px] rounded bg-cyan-400/15 border border-cyan-400/25"><div class="w-6 h-[3px] rounded bg-cyan-400/60"></div></div></div><div class="flex flex-col gap-1"><div class="w-16 h-6 rounded bg-white/70"></div><div class="w-6 h-[2px] rounded bg-cyan-400"></div><div class="w-24 h-1 rounded bg-white/20"></div></div></div><div class="absolute inset-0 bg-white/0 group-hover:bg-white/5 transition-colors duration-200"></div></div><span class="text-[10px] leading-tight text-center transition-colors duration-150 font-medium text-slate-400 dark:text-slate-500 group-hover:text-slate-600 dark:group-hover:text-slate-300">Metric</span></button></div></div></div><div class="flex items-center gap-1.5 px-4 pt-2 pb-0"><button class="px-3 py-1 text-xs font-medium rounded-lg border transition-all cursor-pointer bg-indigo-600 text-white border-indigo-600">OG Image<span class="ml-1.5 opacity-60 text-[10px]">1200Ã630</span></button><button class="px-3 py-1 text-xs font-medium rounded-lg border transition-all cursor-pointer bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-indigo-300">Twitter Card<span class="ml-1.5 opacity-60 text-[10px]">1200Ã628</span></button><button class="px-3 py-1 text-xs font-medium rounded-lg border transition-all cursor-pointer bg-white dark:bg-slate-800 text-slate-600 dark:text-slate-300 border-slate-200 dark:border-slate-700 hover:border-indigo-300">Twitter Square<span class="ml-1.5 opacity-60 text-[10px]">800Ã800</span></button></div><div class="flex flex-col items-center justify-center w-full flex-1 px-4 py-4"><div style="width:100%;display:flex;justify-content:center"><div style="width:600px;height:315px;overflow:hidden;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,0.12)"><div style="width:1200px;height:630px;transform:scale(0.5);transform-origin:top left;position:relative;overflow:hidden"><div style="position:absolute;inset:0;background:linear-gradient(180deg, #09090b, #18181b)"></div><div style="position:relative;width:100%;height:100%"><div style="display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:56px 72px 64px 72px"><img src="/logo.svg" alt="" style="height:28px;object-fit:contain"/><div style="display:flex;flex-direction:column;gap:24px"><div style="width:56px;height:4px;border-radius:2px;background:linear-gradient(90deg, $accentColor, transparent);flex-shrink:0"></div><p style="font-size:72px;font-weight:700;color:#ffffff;font-family:Inter;line-height:1.05;letter-spacing:-0.04em;margin:0;word-break:break-word">The platform for modern web development</p></div></div></div></div></div></div></div></div></div><div class="w-full sm:w-3/12 sm:mt-0 mt-10 sm:px-0 px-4"><div class="sm:mt-0 pt-1 pb-3 sm:pr-2 flex flex-col justify-start items-start h-full w-full gap-2"><style> 13 @keyframes advert-shine { 14 0% { transform: translateX(-100%) skewX(-12deg); } 15 100% { transform: translateX(220%) skewX(-12deg); } 16 } 17 .advert-shine::after { 18 content: ''; 19 position: absolute; 20 inset: 0; 21 background: linear-gradient( 22 90deg, 23 transparent 0%, 24 rgba(255,255,255,0.18) 50%, 25 transparent 100% 26 ); 27 transform: translateX(-100%) skewX(-12deg); 28 animation: advert-shine 3.2s ease-in-out infinite; 29 animation-delay: 1.5s; 30 } 31 @media (prefers-reduced-motion: reduce) { 32 .advert-shine::after { animation: none; } 33 } 34 </style><a href="https://unicornicons.com" target="_blank" rel="noopener noreferrer" class="w-full block focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 rounded-2xl cursor-pointer" style="opacity:0;transform:translateY(4px)"><div class="w-full rounded-2xl bg-white dark:bg-slate-900 border border-slate-100 dar
34k:border-slate-800 shadow-sm overflow-hidden"><div class="flex items-center gap-3 px-3.5 pt-3 pb-2.5"><div class="flex-shrink-0 w-9 h-9 rounded-xl bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-100 dark:border-indigo-500/20 flex items-center justify-center"><img src="/drone.gif" class="h-5 w-5 object-contain" alt="Unicorn Icons"/></div><div class="flex-1 min-w-0"><div class="flex items-center gap-1.5 mb-0.5"><span class="text-[11px] font-semibold text-slate-800 dark:text-slate-100 leading-none tracking-tight">Unicorn Icons</span><span class="text-[9px] font-bold text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-400/10 border border-amber-200 dark:border-amber-400/25 px-1.5 py-px rounded-full leading-none uppercase tracking-wide">Free</span></div><p class="text-[10px] text-slate-400 dark:text-slate-500 leading-tight truncate">400+ animated icons for your projects</p></div><span class="flex-shrink-0 text-[8px] font-medium uppercase tracking-[0.1em] text-slate-300 dark:text-slate-700 self-start mt-0.5">Ad</span></div><div class="px-3 pb-3"><div class="advert-shine relative w-full flex items-center justify-center gap-1.5 bg-indigo-600 dark:bg-indigo-600 text-white text-[11px] font-semibold rounded-xl py-2 overflow-hidden cursor-pointer"><span class="relative z-10">Get Free Icons</span><span class="relative z-10 text-indigo-200">â</span></div></div></div></a><div class="w-full rounded-2xl bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 shadow-sm overflow-hidden flex flex-col flex-1"><div class="overflow-y-auto w-full flex-1 px-3 pt-1 pb-3" style="scrollbar-width:thin;scrollbar-color:rgb(226 232 240) transparent"><div><button class="w-full flex items-center gap-2 pt-3.5 pb-2 group cursor-pointer focus:outline-none"><span class="text-indigo-400 dark:text-indigo-500 flex-shrink-0 group-hover:text-indigo-500 dark:group-hover:text-indigo-400 transition-colors">
34<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="1" width="14" height="14" rx="2.5"></rect><path d="M1 11l3.5-3 2.5 2 3-3.5L15 11"></path></svg></span><span class="text-[10px] font-semibold uppercase tracking-[0.08em] text-slate-400 dark:text-slate-500 flex-1 text-left group-hover:text-slate-500 dark:group-hover:text-slate-400 transition-colors">Background</span><svg class="w-2.5 h-2.5 text-slate-300 dark:text-slate-600 transition-transform duration-200 flex-shrink-0 rotate-0" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l4 4 4-4"></path></svg></button><div class="overflow-hidden" style="height:auto;opacity:1"><div class="pb-2 space-y-0.5"><div><div class="py-1.5 w-full"><label class="w-full pl-0.5 text-xs text-gray-500 pb-1 dark:text-gray-400">Background type</label><div class="flex flex-row flex-wrap gap-1.5 pt-0.5"><div class="rounded-lg border cursor-pointer transition-all relative flex flex-col items-center group p-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700/40"><span class="text-xs font-medium leading-none text-slate-600 dark:text-slate-400">Solid</span></div><div class="rounded-lg border cursor-pointer transition-all relative flex flex-col items-center group p-2 border-indigo-500 bg-indigo-50 dark:bg-indigo-900/25 ring-1 ring-indigo-500/30"><span class="text-xs font-medium leading-none text-indigo-600 dark:text-indigo-400">Gradient</span></div><div class="rounded-lg border cursor-pointer transition-all relative flex flex-col items-center group p-2 border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700/40"><span class="text-xs font-medium leading-none text-slate-600 dark:text-slate-400">Image</span></div></div></div></div><div></div><div><div class="pt-2"><div class="py-0.5"><div class="text-gray-500 dark:text-gray-400 text-xs pb-0.5">Colors</div><div class="flex flex-row flex-wrap relative"><div class="relative mr-1 mt-1 z-10"><div class="cursor-pointer shadow-md hover:shadow-lg w-6 h-6 rounded-full border border-slate-100 dark:border-0" style="background-color:#09090b"></div></div><div class="relative mr-1 mt-1 z-10"><div class="cursor-pointer shadow-md hover:shadow-lg w-6 h-6 rounded-full border border-slate-100 dark:border-0" style="background-color:#18181b"></div></div><div class="cursor-pointer mt-1 w-6 h-6 rounded-full flex justify-center items-center border border-dashed border-slate-500"><img class="w-3 h-3 hover:animate-none" src="/x_dark.svg" style="transform:rotate(45deg)"/></div></div></div></div></div><div>
34<div class="flex w-full flex-col text-neutral-600 dark:text-slate-400 pt-0.5 pb-1"><label for="Angle_id" class="w-full pl-0.5 text-xs text-gray-500 pb-1 dark:text-gray-400">Angle<span class="float-right">180</span></label><input id="Angle_id" type="range" class="z-10 mb-0.5 mt-1.5 h-1.5 w-full appearance-none bg-slate-200 dark:bg-slate-700 rounded-full focus:outline-none [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-indigo-500 [&::-moz-range-thumb]:rounded-full active:[&::-moz-range-thumb]:scale-110 [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-indigo-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:active:scale-110" min="0" max="360" step="1" value="180"/><div class="flex items-center justify-between text-xs text-slate-300 dark:text-neutral-300 mt-0.5"><span aria-hidden="true">0</span><span aria-hidden="true">360</span></div></div></div><div></div><div></div><div class="flex flex-row gap-2 w-full"><div class="flex-1 min-w-0">
34<div class="flex w-full flex-col text-neutral-600 dark:text-slate-400 pt-0.5 pb-1"><label for="Grain_id" class="w-full pl-0.5 text-xs text-gray-500 pb-1 dark:text-gray-400">Grain<span class="float-right">0</span></label><input id="Grain_id" type="range" class="z-10 mb-0.5 mt-1.5 h-1.5 w-full appearance-none bg-slate-200 dark:bg-slate-700 rounded-full focus:outline-none [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-indigo-500 [&::-moz-range-thumb]:rounded-full active:[&::-moz-range-thumb]:scale-110 [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-indigo-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:active:scale-110" min="0" max="1" step="0.05" value="0"/><div class="flex items-center justify-between text-xs text-slate-300 dark:text-neutral-300 mt-0.5"><span aria-hidden="true">0</span><span aria-hidden="true">1</span></div></div></div><div class="flex-1 min-w-0">
34<div class="flex w-full flex-col text-neutral-600 dark:text-slate-400 pt-0.5 pb-1"><label for="Blur_id" class="w-full pl-0.5 text-xs text-gray-500 pb-1 dark:text-gray-400">Blur<span class="float-right">0</span></label><input id="Blur_id" type="range" class="z-10 mb-0.5 mt-1.5 h-1.5 w-full appearance-none bg-slate-200 dark:bg-slate-700 rounded-full focus:outline-none [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-indigo-500 [&::-moz-range-thumb]:rounded-full active:[&::-moz-range-thumb]:scale-110 [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-indigo-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:active:scale-110" min="0" max="20" step="1" value="0"/><div class="flex items-center justify-between text-xs text-slate-300 dark:text-neutral-300 mt-0.5"><span aria-hidden="true">0</span><span aria-hidden="true">20</span></div></div></div></div></div></div><div class="mt-1 border-b border-slate-100 dark:border-slate-700/60"></div></div><div><button class="w-full flex items-center gap-2 pt-3.5 pb-2 group cursor-pointer focus:outline-none"><span class="text-indigo-400 dark:text-indigo-500 flex-shrink-0 group-hover:text-indigo-500 dark:group-hover:text-indigo-400 transition-colors">
34<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M2 4h12M2 8h8M2 12h10"></path></svg></span><span class="text-[10px] font-semibold uppercase tracking-[0.08em] text-slate-400 dark:text-slate-500 flex-1 text-left group-hover:text-slate-500 dark:group-hover:text-slate-400 transition-colors">Content</span><svg class="w-2.5 h-2.5 text-slate-300 dark:text-slate-600 transition-transform duration-200 flex-shrink-0 rotate-0" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l4 4 4-4"></path></svg></button><div class="overflow-hidden" style="height:auto;opacity:1"><div class="pb-2 space-y-0.5"><div><div class="py-1.5"><div class="text-xs text-slate-500 dark:text-slate-400 pb-1">Title</div><textarea placeholder="Enter title..." rows="2" class="w-full px-3 py-1.5 text-xs text-slate-600 dark:text-slate-300 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg placeholder-slate-300 dark:placeholder-slate-600 focus:outline-none focus:ring-1 focus:ring-indigo-500/30 focus:border-indigo-400 dark:focus:border-indigo-500 transition-all resize-none">The platform for modern web development</textarea></div></div></div></div><div class="mt-1 border-b border-slate-100 dark:border-slate-700/60"></div></div><div><button class="w-full flex items-center gap-2 pt-3.5 pb-2 group cursor-pointer focus:outline-none"><span class="text-indigo-400 dark:text-indigo-500 flex-shrink-0 group-hover:text-indigo-500 dark:group-hover:text-indigo-400 transition-colors">
34<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="3"></circle><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.1 3.1l1.4 1.4M11.5 11.5l1.4 1.4M3.1 12.9l1.4-1.4M11.5 4.5l1.4-1.4"></path></svg></span><span class="text-[10px] font-semibold uppercase tracking-[0.08em] text-slate-400 dark:text-slate-500 flex-1 text-left group-hover:text-slate-500 dark:group-hover:text-slate-400 transition-colors">Typography & Style</span><svg class="w-2.5 h-2.5 text-slate-300 dark:text-slate-600 transition-transform duration-200 flex-shrink-0 rotate-0" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l4 4 4-4"></path></svg></button><div class="overflow-hidden" style="height:auto;opacity:1"><div class="pb-2 space-y-0.5"><div><div class="py-1.5"><div class="text-xs text-slate-500 dark:text-slate-400 pb-1">Font</div><button class="w-full flex items-center gap-2 px-3 py-2 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-indigo-400 dark:hover:border-indigo-500 transition-colors cursor-pointer" style="box-shadow:0 0 0 0px rgba(99,102,241,0)"><span style="font-family:"Inter", sans-serif" class="flex-1 text-sm text-left text-slate-700 dark:text-slate-200 truncate">Inter</span><span class="shrink-0 transition-colors text-slate-400 dark:text-slate-500" style="transform:none"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 7 4 4 20 4 20 7"></polyline><line x1="9" y1="20" x2="15" y2="20"></line><line x1="12" y1="4" x2="12" y2="20"></line></svg></span></button></div></div><div class="flex flex-row gap-2 w-full"><div class="flex-1 min-w-0"><div><div class="py-0.5"><div class="text-gray-500 dark:text-gray-400 text-xs pb-0.5">Title color</div><div class="flex flex-row flex-wrap relative"><div class="relative mr-1 mt-1 z-10"><div class="cursor-pointer shadow-md hover:shadow-lg w-6 h-6 rounded-full border border-slate-100 dark:border-0" style="background-color:#ffffff"></div></div></div></div></div></div><div class="flex-1 min-w-0"><div><div class="py-0.5"><div class="text-gray-500 dark:text-gray-400 text-xs pb-0.5">Subtitle color</div><div class="flex flex-row flex-wrap relative"><div class="relative mr-1 mt-1 z-10"><div class="cursor-pointer shadow-md hover:shadow-lg w-6 h-6 rounded-full border border-slate-100 dark:border-0" style="background-color:#a1a1aa"></div></div></div></div></div></div></div><div class="flex flex-row gap-2 w-full"><div class="flex-1 min-w-0">
34<div class="flex w-full flex-col text-neutral-600 dark:text-slate-400 pt-0.5 pb-1"><label for="Title size_id" class="w-full pl-0.5 text-xs text-gray-500 pb-1 dark:text-gray-400">Title size<span class="float-right">72</span></label><input id="Title size_id" type="range" class="z-10 mb-0.5 mt-1.5 h-1.5 w-full appearance-none bg-slate-200 dark:bg-slate-700 rounded-full focus:outline-none [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-indigo-500 [&::-moz-range-thumb]:rounded-full active:[&::-moz-range-thumb]:scale-110 [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-indigo-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:active:scale-110" min="24" max="80" step="1" value="72"/><div class="flex items-center justify-between text-xs text-slate-300 dark:text-neutral-300 mt-0.5"><span aria-hidden="true">24</span><span aria-hidden="true">80</span></div></div></div><div class="flex-1 min-w-0"><div><div class="py-0.5"><div class="text-gray-500 dark:text-gray-400 text-xs pb-0.5">Accent color</div><div class="flex flex-row flex-wrap relative"><div class="relative mr-1 mt-1 z-10"><div class="cursor-pointer shadow-md hover:shadow-lg w-6 h-6 rounded-full border border-slate-100 dark:border-0" style="background-color:#6366f1"></div></div></div></div></div></div></div></div></div><div class="mt-1 border-b border-slate-100 dark:border-slate-700/60"></div></div><div><button class="w-full flex items-center gap-2 pt-3.5 pb-2 group cursor-pointer focus:outline-none"><span class="text-indigo-400 dark:text-indigo-500 flex-shrink-0 group-hover:text-indigo-500 dark:group-hover:text-indigo-400 transition-colors">
34<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="14" height="10" rx="2"></rect><circle cx="5.5" cy="7.5" r="1.2"></circle><path d="M1 11.5l3.5-3 2.5 2 2.5-2.5L15 11.5"></path></svg></span><span class="text-[10px] font-semibold uppercase tracking-[0.08em] text-slate-400 dark:text-slate-500 flex-1 text-left group-hover:text-slate-500 dark:group-hover:text-slate-400 transition-colors">Images</span><svg class="w-2.5 h-2.5 text-slate-300 dark:text-slate-600 transition-transform duration-200 flex-shrink-0 rotate-0" viewBox="0 0 10 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 1l4 4 4-4"></path></svg></button><div class="overflow-hidden" style="height:auto;opacity:1"><div class="pb-2 space-y-0.5"><div><div class="py-1"><div class="relative flex items-center gap-2.5 rounded-xl border border-slate-200 dark:border-slate-700/80 bg-white dark:bg-slate-800/60 p-2 transition-colors duration-200 hover:border-slate-300 dark:hover:border-slate-600"><div class="w-12 h-12 rounded-lg flex-shrink-0 overflow-hidden border border-slate-100 dark:border-slate-700" style="background:repeating-conic-gradient(#f1f5f9 0% 25%, #e2e8f0 0% 50%) 0 0/10px 10px"><img src="/logo.svg" class="w-full h-full object-contain" alt=""/></div><div class="flex-1 min-w-0 pr-12"><p class="text-xs font-medium text-slate-700 dark:text-slate-200 truncate leading-none mb-1">Logo</p></div><div class="absolute top-2 right-2 flex gap-1"><label for="_R_muil7j6_" title="Replace" class="w-6 h-6 flex items-center justify-center rounded-md bg-slate-100 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 text-slate-500 dark:text-slate-400 hover:text-indigo-600 dark:hover:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 hover:border-indigo-300 dark:hover:border-indigo-600 cursor-pointer transition-all duration-150"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg><input id="_R_muil7j6_" type="file" class="hidden" accept="image/png,image/jpeg,image/jpg,image/webp"/></label><button title="Remove" class="w-6 h-6 flex items-center justify-center rounded-md bg-slate-100 dark:bg-slate-700 border border-slate-200 dark:border-slate-600 text-slate-500 dark:text-slate-400 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 hover:border-red-300 dark:hover:border-red-700 cursor-pointer transition-all duration-150"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"></path></svg></button></div></div></div></div><div class="flex flex-row gap-2 w-full"><div class="flex-1 min-w-0">
34<div class="flex w-full flex-col text-neutral-600 dark:text-slate-400 pt-0.5 pb-1"><label for="Logo size_id" class="w-full pl-0.5 text-xs text-gray-500 pb-1 dark:text-gray-400">Logo size<span class="float-right">28</span></label><input id="Logo size_id" type="range" class="z-10 mb-0.5 mt-1.5 h-1.5 w-full appearance-none bg-slate-200 dark:bg-slate-700 rounded-full focus:outline-none [&::-moz-range-thumb]:size-3.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-indigo-500 [&::-moz-range-thumb]:rounded-full active:[&::-moz-range-thumb]:scale-110 [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-indigo-500 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:active:scale-110" min="16" max="64" step="2" value="28"/><div class="flex items-center justify-between text-xs text-slate-300 dark:text-neutral-300 mt-0.5"><span aria-hidden="true">16</span><span aria-hidden="true">64</span></div></div></div></div></div></div></div></div></div></div></div></div></div></div><div class="bg-white dark:bg-slate-900"><div class="max-w-4xl mx-auto px-6 py-16 space-y-12"><div class="space-y-4"><h2 class="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white">Free OG Image Generator</h2><p class="text-slate-500 dark:text-slate-400 text-lg leading-relaxed">Create stunning Open Graph images for social sharing in seconds. Choose from 10 professionally designed templates, customize text, colors, backgrounds, and images â then export at the perfect 1200Ã630px resolution. Ideal for blog posts, product launches, events, and social media. Everything runs in your browser with zero setup.</p></div><div><h3 class="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-4">Related Tools</h3><div class="grid grid-cols-2 sm:grid-cols-4 gap-4"><a href="/tools/text-image"><div class="rounded-2xl bg-white dark:bg-slate-800/80 overflow-hidden group cursor-pointer h-full shadow-sm hover:shadow-xl hover:shadow-slate-200/80 dark:hover:shadow-slate-900/50 transition-shadow duration-300 p-4 flex flex-col gap-4"><div class="relative w-10 h-10 rounded-xl overflow-hidden border border-slate-200/80 dark:border-slate-700/60"><img class="object-cover w-full h-full transition-transform duration-500 ease-out group-hover:scale-[1.08]" src="/tools/text_img.png" alt="Text image generator preview" loading="lazy" decoding="async"/></div><div class="flex items-center justify-between gap-2 min-w-0"><span class="text-sm font-semibold text-slate-800 dark:text-slate-100 truncate">Text image generator</span><span class="opacity-0 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all duration-200 text-indigo-500 text-sm flex-shrink-0">â</span></div></div></a><a href="/tools/gradients"><div class="rounded-2xl bg-white dark:bg-slate-800/80 overflow-hidden group cursor-pointer h-full shadow-sm hover:shadow-xl hover:shadow-slate-200/80 dark:hover:shadow-slate-900/50 transition-shadow duration-300 p-4 flex flex-col gap-4"><div class="relative w-10 h-10 rounded-xl overflow-hidden border border-slate-200/80 dark:border-slate-700/60"><img class="object-cover w-full h-full transition-transform duration-500 ease-out group-hover:scale-[1.08]" src="/tools/color.png" alt="Gradient generator preview" loading="lazy" decoding="async"/></div><div class="flex items-center justify-between gap-2 min-w-0"><span class="text-sm font-semibold text-slate-800 dark:text-slate-100 truncate">Gradient generator</span><span class="opacity-0 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all duration-200 text-indigo-500 text-sm flex-shrink-0">â</span></div></div></a><a href="/tools/backgrounds"><div class="rounded-2xl bg-white dark:bg-slate-800/80 overflow-hidden group cursor-pointer h-full shadow-sm hover:shadow-xl hover:shadow-slate-200/80 dark:hover:shadow-slate-900/50 transition-shadow duration-300 p-4 flex flex-col gap-4"><div class="relative w-10 h-10 rounded-xl overflow-hidden border border-slate-200/80 dark:border-slate-700/60"><img class="object-cover w-full h-full transition-transform duration-500 ease-out group-hover:scale-[1.08]" src="/tools/bg.png" alt="Backgroun
34d generator preview" loading="lazy" decoding="async"/></div><div class="flex items-center justify-between gap-2 min-w-0"><span class="text-sm font-semibold text-slate-800 dark:text-slate-100 truncate">Background generator</span><span class="opacity-0 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all duration-200 text-indigo-500 text-sm flex-shrink-0">â</span></div></div></a><a href="/tools/mesh-gradient"><div class="rounded-2xl bg-white dark:bg-slate-800/80 overflow-hidden group cursor-pointer h-full shadow-sm hover:shadow-xl hover:shadow-slate-200/80 dark:hover:shadow-slate-900/50 transition-shadow duration-300 p-4 flex flex-col gap-4"><div class="relative w-10 h-10 rounded-xl overflow-hidden border border-slate-200/80 dark:border-slate-700/60"><img class="object-cover w-full h-full transition-transform duration-500 ease-out group-hover:scale-[1.08]" src="/tools/mesh.png" alt="Mesh gradient generator preview" loading="lazy" decoding="async"/></div><div class="flex items-center justify-between gap-2 min-w-0"><span class="text-sm font-semibold text-slate-800 dark:text-slate-100 truncate">Mesh gradient generator</span><span class="opacity-0 group-hover:opacity-100 group-hover:translate-x-0.5 transition-all duration-200 text-indigo-500 text-sm flex-shrink-0">â</span></div></div></a></div></div><div>
34<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is an OG image?","acceptedAnswer":{"@type":"Answer","text":"An OG (Open Graph) image is the preview image that appears when you share a link on social media platforms like Twitter, Facebook, LinkedIn, and Slack. The standard size is 1200Ã630 pixels."}},{"@type":"Question","name":"How many templates are available?","acceptedAnswer":{"@type":"Answer","text":"There are 10 professionally designed templates including Centered, Split Image, Blog Post, Minimal, Announcement, Quote, Profile, Branded, Event, and Side Accent layouts."}},{"@type":"Question","name":"Can I upload my own images?","acceptedAnswer":{"@type":"Answer","text":"Yes. You can upload custom images for the background, a user/profile photo, and a logo. All common formats (PNG, JPG, WEBP) are supported."}},{"@type":"Question","name":"What export formats are supported?","acceptedAnswer":{"@type":"Answer","text":"You can export as PNG or JPG at 1x, 2x, or 3x scale. The base resolution is always 1200Ã630px â the standard OG image size."}},{"@type":"Question","name":"Is my data uploaded to a server?","acceptedA
34nswer":{"@type":"Answer","text":"No. All processing happens locally in your browser. Your images and text never leave your device."}},{"@type":"Question","name":"Can I use the generated images commercially?","acceptedAnswer":{"@type":"Answer","text":"Yes. The OG images you create are yours to use freely in any project, website, or social media post."}}]}</script>
34<h2 class="text-xl font-semibold text-slate-800 dark:text-slate-200 mb-4">Frequently Asked Questions</h2><div class="space-y-2"><div style="opacity:0;transform:translateY(12px)"><button class="w-full text-left rounded-xl border border-slate-200 dark:border-white/[0.07] bg-white dark:bg-[#111113] px-5 py-4 cursor-pointer hover:border-slate-300 dark:hover:border-white/[0.12] hover:bg-slate-50 dark:hover:bg-[#141416] transition-all duration-200"><div class="flex items-center justify-between gap-4"><span class="font-medium text-slate-800 dark:text-zinc-300 text-sm leading-snug" style="font-family:'Space Grotesk', sans-serif">What is an OG image?</span><svg class="w-4 h-4 flex-shrink-0 text-slate-400 dark:text-zinc-600 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"></path></svg></div></button></div><div style="opacity:0;transform:translateY(12px)"><button class="w-full text-left rounded-xl border border-slate-200 dark:border-white/[0.07] bg-white dark:bg-[#111113] px-5 py-4 cursor-pointer hover:border-slate-300 dark:hover:border-white/[0.12] hover:bg-slate-50 dark:hover:bg-[#141416] transition-all duration-200"><div class="flex items-center justify-between gap-4"><span class="font-medium text-slate-800 dark:text-zinc-300 text-sm leading-snug" style="font-family:'Space Grotesk', sans-serif">How many templates are available?</span><svg class="w-4 h-4 flex-shrink-0 text-slate-400 dark:text-zinc-600 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"></path></svg></div></button></div><div style="opacity:0;transform:translateY(12px)"><button class="w-full text-left rounded-xl border border-slate-200 dark:border-white/[0.07] bg-white dark:bg-[#111113] px-5 py-4 cursor-pointer hover:border-slate-300 dark:hover:border-white/[0.12] hover:bg-slate-50 dark:hover:bg-[#141416] transition-all duration-200"><div class="flex items-center justify-between gap-4"><span class="font-medium text-slate-800 dark:text-zinc-300 text-sm leading-snug" style="font-family:'Space Grotesk', sans-serif">Can I upload my own images?</span><svg class="w-4 h-4 flex-shrink-0 text-slate-400 dark:text-zinc-600 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"></path></svg></div></button></div><div style="opacity:0;transform:translateY(12px)"><button class="w-full text-left rounded-xl border border-slate-200 dark:border-white/[0.07] bg-white dark:bg-[#111113] px-5 py-4 cursor-pointer hover:border-slate-300 dark:hover:border-white/[0.12] hover:bg-slate-50 dark:hover:bg-[#141416] transition-all duration-200"><div class="flex items-center justify-between gap-4"><span class="font-medium text-slate-800 dark:text-zinc-300 text-sm leading-snug" style="font-family:'Space Grotesk', sans-serif">What export formats are supported?</span><svg class="w-4 h-4 flex-shrink-0 text-slate-400 dark:text-zinc-600 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"></path></svg></div></button></div><div style="opacity:0;transform:translateY(12px)"><button class="w-full text-left rounded-xl border border-slate-200 dark:border-white/[0.07] bg-white dark:bg-[#111113] px-5 py-4 cursor-pointer hover:border-slate-300 dark:hover:border-white/[0.12] hover:bg-slate-50 dark:hover:bg-[#141416] transition-all duration-200"><div class="flex items-center justify-between gap-4"><span class="font-medium text-slate-800 dark:text-zinc-300 text-sm leading-snug" style="font-family:'Space Grotesk', sans-serif">Is my data uploaded to a server?</span><svg class="w-4 h-4 flex-shrink-0 text-slate-400 dark:text-zinc-600 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"></path></svg></div></button></div><div style="opacity:0;transform:translateY(12px)"><button class="w-full text-left rounded-xl border border-slate-200 dark:border-white/[0.07] bg-white dark:bg-[#111113] px-5 py-4 cursor-pointer hover:border-slate-300 dark:hover:border-white/[0.12] hover:bg-slate-50 dark:hover:bg-[#141416] transition-all duration-200"><div class="flex items-center justify-between gap-4"><span class="font-medium text-slate-800 dark:text-zinc-300 text-sm leading-snug" style="font-family:'Space Grotesk', sans-serif">Can I use the generated images commercially?</span><svg class="w-4 h-4 flex-shrink-0 text-slate-400 dark:text-zinc-600 transition-transform duration-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"></path></svg></div></button></div></div></div></div></div></div></div>
34<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/tools/og-image","query":{},"buildId":"HZM18sQ9j-ViJyJqVP_qT","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>
34</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.