Pulsar vs custom CSS: which should you actually use?

We make a Shopify text-styling app, so you'd expect this post to end with "use Pulsar." It doesn't. There are genuinely cases where writing your own CSS is the right call, and pretending otherwise insults the developers we want as users. This is the honest version of the comparison — when custom CSS wins, when Pulsar wins, and the eight criteria we'd use to pick if we weren't the ones shipping the app.

TL;DR

• Custom CSS wins when you own the theme, you control content, and the design needs are fixed forever. One-off bespoke builds, agency work for a client who will never touch text, or design-system-driven stores with a real frontend team.
• Pulsar wins when content changes weekly, the merchant edits their own copy, you don't want a developer round-trip every time marketing wants to bold a word in pink, or you need effects (animated circles, highlight underlines) that take real work to hand-build.
• Neither is universally right. The honest tiebreaker is: who edits the headlines, and how often?

The eight things that actually matter

Every "app vs code" debate online compares one or two axes (usually cost, sometimes speed) and skips the rest. On a real Shopify store there are eight that determine which call you'll regret in six months. We score both honestly below.

Time to ship

Writing one gradient class is fast. Writing one gradient class that works on iOS Safari, doesn't collide with the theme's `color: inherit`, has a sensible fallback, and is wrapped in the right Liquid block is a 30-minute job the first time — we walked through every gotcha in the gradient-text guide. Pulsar's @{red-blue}word@ is ~60 seconds and the merchant can do it.

If you're shipping one effect on one page once, that 30 minutes is fine. If you're shipping ten variations across product pages, the homepage, and a seasonal campaign — multiply.

Total cost of ownership

The naive frame: CSS is free, apps cost money. The honest frame: CSS is free at install, then accrues developer time every theme update, every new section, every "can we make this word green" request from marketing. Pulsar is $0 on the free tier (color and gradient effects) and $7.99/mo for Pro (animated circles and highlights), and that's the whole bill.

If a developer hour costs $100 and you spend two hours a year maintaining your text effects, you're already past the cost of a Pro subscription. If marketing pings the dev twice a month, you're way past it.

Theme-update safety

This is the one nobody warns you about until it bites. Shopify themes update — Dawn moves from v13 to v14, you click "update theme," and your customisations to assets/base.css and sections/main-product.liquid are gone unless you've been disciplined about a duplicated theme.css override. Pulsar is a theme app extension, which means its files live outside your theme. Updating Dawn does nothing to it.

Merchant editability

If the person editing the copy is also the person who knows CSS, this doesn't matter. On every store we've seen, those are two different people. With custom CSS, every "change the gradient on the hero from purple to teal" request becomes a Slack message to a developer. With Pulsar, the merchant opens the section, changes @{purple-pink} to @{teal-emerald}, hits save.

This is the difference between a design system that ships once and a design system that compounds.

Accessibility

Tie. Both approaches render real text in real <h1>/<h2>/<p> elements, both are read by screen readers identically, and both are subject to the same WCAG contrast rules. Pulsar doesn't replace text with images or canvas, and a sensible custom-CSS approach won't either. The mistake to avoid in both worlds: gradients with a stop that has poor contrast against the background.

Performance

Custom CSS wins on raw numbers — zero runtime, zero JS, the styles are inlined into the same stylesheet your theme already ships. Pulsar adds ~3 KB of script (the inline rewriter), one network call to the licence beacon on first paint, and a small DOM walk over the configured selectors. In practice this is sub-10ms on a mid-tier phone and below the noise floor for Core Web Vitals. But: if you're chasing single-digit-millisecond LCP, custom CSS is the strict winner.

Brand fit / design control

Custom CSS gives you everything. Any gradient angle, any mix-blend-mode, any text-stroke trick, any custom animation curve, anything you can imagine. Pulsar gives you a constrained palette: solid colors, two-stop gradients, arbitrary CSS gradients via @g{...}, plus a library of animated circle and highlight effects. The constraint is real — if your brand has a specific glitch-text effect or a custom variable-font animation, Pulsar won't do it.

For most stores, the constraint is also the feature: bounded design space stops merchants from inventing 14 incompatible heading styles across the site.

New effects later, without redev

When a new effect lands in Pulsar — say, a wavy underline highlight — every existing customer gets it instantly. With custom CSS, every new effect is a new ticket. This is the difference that shows up at month six, not month one.

The decision tree

Run these in order. The first one where the answer is clear is your answer.

1. Is this a single bespoke headline on a one-off custom theme, with no expectation of changes? → Custom CSS. An app is overkill.
2. Do you have an in-house frontend team that owns the theme and ships changes weekly? → Custom CSS. You don't need a UI for what you're already doing.
3. Will the merchant want to change the styled words themselves? → Pulsar. Every other answer here loses on this axis.
4. Do you need animated effects (circle annotation, highlight underline) and not just colors? → Pulsar. Building these from scratch is real work — SVG paths, stroke-dasharray animation, hand-tuned timing. The Pro tier is cheaper than the dev hours.
5. Is the store running on a niche custom theme with unusual class hierarchies? → Try Pulsar first (it injects inline styles that win specificity battles); fall back to custom CSS if it conflicts.
6. Are you on Shopify Plus with a real design system and a brand that demands custom typography animation? → Custom CSS, with Pulsar as the fallback for the parts of the site marketing edits directly.
7. Still unsure? → Install Pulsar on the free tier, try it for a week. The bill is $0 and the uninstall takes ten seconds.

What custom CSS looks like in practice

For fairness, here's a complete working custom-CSS implementation of a gradient headline, the way a careful developer would actually write it. This is the bar we're comparing against — not a half-finished snippet from a Reddit thread.

/* Loaded from theme.liquid via {{ 'custom.css' | asset_url | stylesheet_tag }} */
.pulse-gradient {
  background-image: linear-gradient(110deg, #a855f7 0%, #ec4899 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Beat global "color: inherit" rules some themes ship */
h1 .pulse-gradient,
h2 .pulse-gradient,
h3 .pulse-gradient {
  -webkit-text-fill-color: transparent;
}

/* Fallback for browsers that don't support background-clip:text */
@supports not (background-clip: text) {
  .pulse-gradient {
    color: #a855f7;
    -webkit-text-fill-color: #a855f7;
    background-image: none;
  }
}

<h1>Welcome to my <span class="pulse-gradient">awesome</span> store</h1>

Then for every new headline, every theme update, and every "can we change awesome to incredible" request — back to the code editor. Multiply by the number of headlines on your site.

What Pulsar looks like in practice

Same outcome. The merchant edits the section, types this in the headline field:

Welcome to my @{purple-pink}awesome@ store

Pulsar's runtime rewrites it at render time to the same <span> you'd write by hand, with -webkit-text-fill-color and the cascade-winning inline style already in place. No code editor, no theme file. For the full syntax tour see the cheatsheet.

Welcome to my @{purple-pink}awesome@ store

Where Pulsar genuinely doesn't fit

We're not the right tool for every store. Cases where we'd tell you not to bother installing:

• You need a single one-off styled word that will never change. A 60-second inline <span style> in a Rich Text block is faster than installing anything.
• Your brand requires a hand-built animation we don't offer. Custom keyframes, variable-font morphing, specific easing curves — write your own CSS.
• You're on a headless storefront (Hydrogen, custom Next.js). Pulsar is a theme app extension that only runs in Shopify's Liquid theme runtime. Headless stores need a different approach (we're working on it).
• You don't want any third-party script on your storefront, ever. Fair position; custom CSS is the only zero-JS approach.

Frequently asked questions

Verdict

If you came here looking for permission to write your own CSS — you have it. For a one-off custom build with no merchant editing, hand-rolled CSS is faster, lighter, and infinitely flexible. We'd do the same.

For everyone else — stores where content moves, where marketing wants to ship without a dev round-trip, where a theme update shouldn't break a campaign, where you want animated effects you don't want to hand-build — Pulsar pays for itself in the first edit the merchant makes without messaging you. The free tier covers most of it; Pro is $7.99/mo and unlocks the animated circle and highlight effects.