OG Image Playground

import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET() {
  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#0f172a',
          
          color: 'white',
          padding: '4rem',
          textAlign: 'center',
        }}
      >
        <div style={{ fontSize: 32, marginBottom: 24, opacity: 0.8 }}>WebUtilsPro</div>
        <div style={{ fontSize: 64, fontWeight: 900, lineHeight: 1.2, marginBottom: 24, background: 'transparent', backgroundClip: 'border-box', color: 'inherit' }}>
          Amazing Content
        </div>
        <div style={{ fontSize: 25.6, opacity: 0.7, maxWidth: 900 }}>
          Learn how to build incredible things with modern web technologies.
        </div>
        <div style={{ position: 'absolute', bottom: 40, width: '100%', height: 8, background: '#3b82f6' }} />
      </div>
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}