Why your engraved & embossed product mockups look fake — and how TailorKit fixes it

The five-second test every personalized product store fails

Open any personalized product page in a Shopify store. Engraved wallet, embossed notebook, neon sign mockup. Now squint.

If the customization looks like a sticker someone slapped on the photo, you already know why your conversion rate is what it is.

That sticker look isn't a Photoshop problem. It's a physics problem. Real engraving on leather is not a logo with a black shadow under it. Real embossing on a notebook is not a darker version of the cover color. Real neon is not a glow filter from a 2007 tutorial.

We rebuilt all four — engrave, deboss, emboss, neon — inside TailorKit from the rendering pipeline up. Here's what changes, and why it matters the moment a buyer hovers over the personalization input.

Effects at a glance

Skim the differences, then dive in below.

EFFECT 01 Engraving on leather — it's color, not depth

Most mockup tools treat engraving as "make the logo darker and add a shadow." Wrong.

When a laser hits leather, it burns the surface. The result is a color change — light scorch at low power, charred near-black at high power — with a tiny singed lip that catches raking light. There's almost no depression at all.

TailorKit ships a single Burn Intensity slider that drives the actual chemistry:

• At 20%, glyphs render in light-scorch brown (#9B6B3D).
• At 60% (default), they're dark-roasted leather brown (#5A3218).
• At 100%, near-black charred carbon (#1A0A04) — the cut-through look.

The color slides linearly with the slider — same way a real laser pass does as you crank wattage. Combine with a configurable light angle (default top-left, 315°) and you get a singed outer-rim highlight that sells the burn.

Why merchants care: your customer sees what their name will actually look like burnt into the wallet, not a Photoshop placeholder. Returns drop. Reviews stop saying "looked different in the photo."

EFFECT 02 Embossing — let the leather show through

Embossed leather doesn't have ink. The raised area is the same color as the rest of the cover — slightly lit on top, slightly shadowed where it falls back to flat.

So why do other tools paint embossed text white or solid black? Because that's the easy thing to do.

TailorKit does the hard thing: we sample the material under the text before applying the effect. Five samples by five samples, twenty-five points, averaged into one RGB value. The text fill becomes that color, at 15% opacity — so the actual leather grain shows through the glyph.

Then we stack three drop shadows, not at the same angle, but at 18°, 39°, and 101°. A single drop shadow looks like a sticker. Three at slightly different angles look like sunlight hitting three faces of a raised surface.

The result: emboss on walnut leather looks warm and brown. Emboss on white-grain leather looks bone-white. Emboss on black caviar looks faintly graphite. One preset, every material.

For the truly raised feel, we even add a darker inner highlight along the top edge — counter-intuitive, but mimicking how a raised surface catches glancing light at its uppermost rim.

A single drop shadow looks like a sticker. Three at slightly different angles look like sunlight hitting three faces of a raised surface.

EFFECT 03 Debossing — what's missing is the point

Here's the tell that separates real-deboss software from fake-deboss software: drop shadow.

A debossed letter lives below the leather surface. It cannot cast an outer shadow. Period.

Every preset that adds one is lying to your eye, and your eye knows. The buyer doesn't articulate it ("hmm, this drop shadow violates the geometry of inverse relief"). They just feel that something's off, and bounce.

TailorKit's deboss preset has zero outer shadows. Instead:

• Two dark inner shadows on the down-right wall — the side of the depression in shade.
• One light inner shadow on the up-left wall — ambient light bouncing off the far cliff of the press.
• A slightly darker, slightly desaturated fill at 70% opacity — because compressed leather fibers actually do shift color where they've been crushed.

We sample the material color the same way emboss does, then push the saturation down a touch. The result reads as pressed into the surface, not laid on top.

EFFECT 04 Neon — three layers, one tube

A real neon sign has three things happening at once:

1. The glass tube itself, hot enough to blow out white at the core.
2. A tight bright halo within centimeters of the tube.
3. A wide diffuse halo that fades into the surrounding wall.

A "neon filter" in most editors gives you exactly one of those — the wide halo — and calls it done. The result looks like a Gaussian blur, because that's what it is.

TailorKit stacks all three:

• Inner shadow at 50% radius, white at 80% opacity — the glass-tube blowout.
• Drop shadow at 6% radius — the tight near halo, in the user's chosen color.
• Drop shadow at 16% radius — the wide far halo, same color, softer.

Both halos use currentColor, so when you change the neon hue, every halo follows in unison — physically correct for monochromatic gas discharge. Pick the color once and the whole tube re-tunes.

We also auto-bump the user's chosen color 15% lighter in HSL space when you apply Neon. Real neon is high-luminance; if we used the raw color you picked, it'd look like a sticker pretending to be neon. Subtle, but it's the difference between "lit" and "drawn."

"Wait — what about printing?"

Common merchant fear: if my mockup looks this realistic, will the print also have a fake shadow baked in?

No. Effects render in the preview only. When an order goes to your engraver, embosser, laser, or DTG printer, TailorKit strips every shadow, every halo, every burn-color overlay automatically. The physical machine produces the depth; we produce the visualization. Doubling them up would ruin the actual product.

If you specifically want the visualization to print (e.g., a DTG t-shirt that mimics engraved leather aesthetic), there's one toggle — Include effects in print — and we'll honor it.

Under the hood — for the engineers reading

A few honest pieces of the implementation, in case you're evaluating us against another tool's marketing page.

Material-aware color sampling

When you apply Emboss or Deboss, we temporarily hide the text layer, redraw the Konva stage, sample a 5×5 grid of pixels under the text bounding box, average the RGB, then restore the layer and write the sampled color back as the fill. Twenty-five samples, one frame, imperceptible. Sampling happens against the real composited scene — mockup background, gradient, and underlying image layers — not a guessed color.

Single SVG filter, not stacked filters

All shadows, inner shadows, strokes, and fills for a given text node compose into one <filter> element with one <feMerge>. Browsers love this — it stays GPU-side, no per-effect rasterization, identical compositing order to Figma.

Scale-invariant via relative units

Effects don't store absolute pixel offsets. They store direction (degrees), distancePercent, and radiusPercent, all relative to the layer's font size. A neon preset built at 16px renders proportionally at 200px, at 4K export, on a Retina print proof.

feTurbulence + feDisplacementMap for organic edges

Image emboss and deboss optionally distort the path edge with deterministic Perlin-like turbulence (seed 123, so previews and saved templates render identically). It's the difference between a die-cut sticker edge and a real hand-pressed leather stamp.

Burn intensity → RGB, not lookup table

Laser engraving color is computed directly from the slider value: r = 155 − burnIntensity × 129, g = 107 − burnIntensity × 97, b = 61 − burnIntensity × 57. Light scorch at 20%, charred at 100%. One slider, real chemistry.

Per-substrate engraving

"Engrave" isn't one filter. Laser-engraved leather burns brown. Deep-laser-engraved gold etches dark bronze. Diamond-drag scratched silver brightens with directional bevel (because polished V-groove facets reflect light, not absorb it). Hot-foil stamping uses a foil color lookup. One generic "engrave" filter would never match all four — so we didn't ship one.

Safari filter-area cap

Discovered the hard way: Safari has an undocumented ~6–10 million pixel filter region limit. We clamp the filter region to 100% on Safari (everywhere else uses the natural overflow), avoiding silent render failures on feGaussianBlur at high zoom.

The bottom line for your store

Realistic effects are not a "nice to have." They are the first thirty seconds of a buyer's trust decision on a personalized product. The flatter your preview, the more your customer assumes the final product will look like a sticker — and the faster they bounce.

TailorKit's engrave, deboss, emboss, and neon were rebuilt because we got tired of watching merchants ship beautiful products with previews that didn't sell them. The four effects above ship in every TailorKit template today, with one-click presets and per-material auto-tuning.

Frequently asked questions

What is TailorKit and which Shopify stores is it built for? +

TailorKit is a product personalization app for Shopify that lets merchants offer engraved, embossed, debossed, neon-glow, and custom-text products with realistic real-time previews. Built for stores selling personalized leather goods, jewelry, neon signs, drinkware, apparel, and any product where the buyer customizes a name, monogram, or design before checkout.

Which materials does TailorKit support for realistic effect rendering? +

Leather, wood, metal (gold, silver, rose gold, platinum, brass, copper), acrylic, fabric, paper, and ceramic. The material color is sampled from the product mockup background, so the effect inherits the actual color and texture of the underlying surface.

How is TailorKit's engrave different from other Shopify personalization apps? +

Most apps render engraving as a generic dark logo with a drop shadow — a visual lie, because real laser engraving on leather is a color change, not a depression. TailorKit computes the burnt color directly from a Burn Intensity slider (light scorch at 20%, charred near-black at 100%) and adds a faint singed-rim highlight matching the scene's light angle. The preview matches what your laser actually produces.

Why does TailorKit's deboss effect not have a drop shadow? +

Because real debossed letters live below the leather surface and physically cannot cast an outer shadow. Adding one is the giveaway that separates fake-deboss software from real-deboss software. TailorKit uses inner shadows on the depression walls instead — two dark on the shaded side, one light on the ambient-bounce side.

Do the rendered effects affect the final printed or engraved product? +

No. Effects render in the preview only. When an order is sent to your engraver, embosser, laser, or print-on-demand fulfillment partner, TailorKit strips every shadow and overlay automatically. The physical machine produces the depth; TailorKit's render is the visualization. There is an opt-in toggle Include effects in print if you specifically want the visualization to print.

How does TailorKit render a realistic neon sign mockup? +

By stacking three layers instead of one: a tight near halo (6% radius, user's color), a wide far halo (16% radius, same color), and a bright white inner-core blowout (50% radius). Combined with a 15% HSL lightness boost on the user's chosen color, the result reads as a lit gas-discharge tube rather than a Gaussian-blurred text label.

Does TailorKit work with leather, wood, and metal jewelry product mockups? +

Yes. Engrave has four substrate-specific implementations: laser engraving on leather (computes burnt-brown color), deep laser engraving on metal jewelry (computes oxide tone from darkness and warmth, supporting gold, silver, rose gold, platinum, brass, copper), diamond-drag V-groove on polished metal (bright reflective scratch lines), and laser annealing (oxidation mark, no depth).