CCCouponCanvas

LIVE CSS PLAYGROUND

Tune your own coupon.

Edit text, drag coupon elements, and export the current design. Arrow keys fine-tune; hold Shift for larger steps.

Visual template / demo data
COUPONCANVAS / DEMO
Food ideas · Opposed notches
Morning coffee
Valid on orders over CNY 58
20CNY off
Demo expiry: 2026.08.31
VISUAL DEMO ONLY

EXPORT DESIGN

Copy or export this design

<!-- CSS -->
<style>
/* Opposed notches */
.coupon {
  background: #f6c999;
  color: #20334d;
  border-radius: 24px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(circle at left calc(50% + 0px), transparent 18px, #000 19px), radial-gradient(circle at right calc(50% + 0px), transparent 18px, #000 19px);
  mask-image: radial-gradient(circle at left calc(50% + 0px), transparent 18px, #000 19px), radial-gradient(circle at right calc(50% + 0px), transparent 18px, #000 19px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.coupon { width: min(100%, 530px); height: 326px; font-family: Arial, "PingFang SC", sans-serif; }
.coupon__item { position: absolute; z-index: 2; left: var(--x); top: var(--y); box-sizing: border-box; overflow-wrap: anywhere; }
.coupon__item--topline,.coupon__item--category { width: min(64%, calc(100% - var(--x))); font-size: 10px; font-weight: 800; line-height: 1.15; letter-spacing: .08em; }
.coupon__item--title { width: min(62%, calc(100% - var(--x))); font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.06em; }
.coupon__item--condition { width: min(58%, calc(100% - var(--x))); font-size: 13px; line-height: 1.3; }
.coupon__item--price { width: 28%; color: #bd4428; font-size: 60px; font-weight: 800; line-height: .8; letter-spacing: -.08em; text-align: right; overflow-wrap: anywhere; }
.coupon__item--price small { display: block; color: inherit; font-size: 12px; line-height: 1.15; letter-spacing: 0; }
.coupon__item--expiry,.coupon__item--footer { width: min(46%, calc(100% - var(--x))); font-size: 11px; font-weight: 700; line-height: 1.15; }
@media (max-width: 640px) { .coupon { height: 290px; } .coupon__item--title { font-size: 24px; } .coupon__item--price { font-size: 45px; } }
</style>

<!-- HTML -->
<div class="coupon">
  <div class="coupon__item coupon__item--topline" style="--x:5.3%;--y:8.6%">COUPONCANVAS / DEMO</div>
  <div class="coupon__item coupon__item--category" style="--x:5.3%;--y:22.5%">Food ideas · Opposed notches</div>
  <div class="coupon__item coupon__item--title" style="--x:5.3%;--y:30.5%">Morning coffee</div>
  <div class="coupon__item coupon__item--condition" style="--x:5.3%;--y:46.5%">Valid on orders over CNY 58</div>
  <div class="coupon__item coupon__item--price" style="--x:67%;--y:36%">20<small>CNY off</small></div>
  <div class="coupon__item coupon__item--expiry" style="--x:5.3%;--y:84.5%">Demo expiry: 2026.08.31</div>
  <div class="coupon__item coupon__item--footer" style="--x:72%;--y:84.5%">VISUAL DEMO ONLY</div>
</div>