CSS Text Overlay System

Manuel_songokuh · July 24, 2025, 4:15pm

#suggestions

Hi!

I have an idea for a tool or system that could improve text editing in Shotcut (or any video editor that supports HTML overlays like WebVFX). I hope a developer might be interested in creating something like this.

Problem with current overlays:

The current HTML Overlay (WebVFX) system requires editing external .html files manually.

It works, but it’s not direct or user-friendly.

It’s too generic (full webpage), and not optimized for simple text overlays.

Changing the text means opening a file, editing, saving, and refreshing inside Shotcut.

Suggested Solution:

Create a new kind of overlay — let’s call it:
Dynamic CSS Text Overlay
A simple overlay only for styled text, designed to be:

Editable directly in the UI (without opening files)

Styled via CSS (for 3D, shadow, glow, etc.)

No background, no HTML layout, just text

Key Features:

Editable Text

The user can write or change the text live inside Shotcut

No need to open external files

Attach CSS Style

The user can select or paste a CSS-style block

Only for styling text: shadows, stroke, 3D, etc.

No scene, no video layer, no HTML layout — just text

Future CSS Library Support

In the future, users could choose from a list of predefined CSS styles (like templates or presets)

Example: import styles from CodePen, customize slightly, reuse easily

Timeline Control

After applying the overlay, the user can move it in the timeline

Can reposition it on screen, scale it

Font size can be:

standard (fixed)

or scalable (auto-adjusted with the text container)

Why this matters

CSS is a universal, lightweight styling system used worldwide for text effects

There are thousands of ready-made styles available for free

This would avoid the need to open Glaxnimate, SVG tools, or Inkscape

Editors like Kdenlive still lack modern text systems — this could become a strong feature for Shotcut

Let me know if this is possible or interesting to develop — or if you have a better path to achieve dynamic, styled, editable text overlays.

Thank you!

shotcut · July 24, 2025, 4:16pm

Why are you talking about something (WebVFX) that has not existed in Shotcut for FIVE years. No, this will not be possible: the technology is no longer compatible.

This would avoid the need to open Glaxnimate, SVG tools, or Inkscape

It is not desirable to avoid them: there are templates or downloadable for these that are easier to work with in a visual tool rather than a codepen.

“dynamic, styled, editable text overlays” is possible using the Text: Rich filter (within a text clip, i.e. transparent color generator) combined with other filters that are keyframable on the timeline.

Manuel_songokuh · July 24, 2025, 6:41pm

Thanks for the clarification!

I didn’t know that WebVFX is no longer supported — now it makes sense why that approach is not viable anymore.

Regarding Glaxnimate/SVG/Inkscape: I totally understand your point. Visual tools are great, and many users prefer drag-and-drop or templates. But I was thinking from the perspective of fast and editable styling, like:

writing text directly on the timeline

pasting or selecting a visual "style" (like shadow, glow, 3D)

no extra steps or tools to open

I’ll definitely take another look at Text: Rich and experiment with filters and keyframes as you suggested.
Maybe what I imagined is already possible using those tools with some creativity.

Thanks again for your time and clarification!

Manuel_songokuh · July 24, 2025, 6:54pm

Just to give you a visual reference of what I’m talking about:

Please take a look at these CodePen demos:

They show incredible 3D styled text, all created using pure CSS.

It’s beautiful, dynamic, and very lightweight.
You can imagine using this kind of visual quality inside Shotcut, applied to editable titles — no SVGs, no Glaxnimate, no external tools — just CSS + text.

Please check the CodePens — it’s easy to see the potential at a glance.

What do you think — would it be possible to explore another way in Shotcut to support this kind of styling?

Thanks again!

shotcut · July 24, 2025, 7:18pm

I do think you have some good points. You can see posts in this forum about people using the browser overlay in OBS Studio to record HTML-based content with a blue or green background to chroma key. However, that is not great.

I did a little research, and I found there is a popular JavaScript library called Puppeteer that can record screenshots to an image sequence of PNG with alpha channel. Moreover, Qt has a component not yet included in Shotcut called QtWebEngine that is based on Chromium. That means Puppeteer could work with it. I am not confident this can be used as seamless and embedded as Text: Rich or WebVFX was. However, it should be something that can run as a generator not integrated into the engine: similar to Speech-to-Text, for example. I have not been able to find any existing tools that combine these things. So, now I am curious!

If you have any node.js experience, you can try this out today using Puppeteer with Chromium, Chrome, Edge, or Firefox.

Manuel_songokuh · July 25, 2025, 9:53am

Thanks again!

I agree that Puppeteer is powerful — but from a user perspective, it’s too technical and not really beginner-friendly. Installing Node.js, writing scripts, and rendering through command line is not realistic for most users.

If something like Puppeteer was used internally in Shotcut to power a “CSS Text Style Renderer”, that would be amazing. But as an external tool — it’s too complex.

My original goal is to make this as simple and fast as possible for non-technical users:
→ write a title → apply a CSS style → done.
Not record or convert externally.

Also, just to clarify:
I’m not a programmer, so I really appreciate tools that are visual or copy-paste friendly.
It would be wonderful if in the future, someone finds a smart trick or lightweight plugin that lets users simply copy and paste a CSS-style (without background) and apply it to dynamic text in Shotcut.

Thanks again for listening and for being curious — that’s already a big step forward!

Manuel_songokuh · July 28, 2025, 5:26pm

I just wanted to follow up and ask:

Do you happen to know litehtml?
It’s a lightweight HTML/CSS rendering engine (GitHub - litehtml/litehtml: Fast and lightweight HTML/CSS rendering engine) that some developers in the Kdenlive forum mentioned. It doesn’t support animations, but it’s very fast and portable — and seems ideal for rendering styled static text with CSS.

Since Shotcut already uses Qt, and litehtml is designed to work in C++ and Qt environments, maybe it could be a simpler way to implement CSS-based styled text, without needing to rely entirely on Puppeteer or browser-based engines?

Of course, animation could still be done using keyframes or effects inside Shotcut — just like now.

So, in theory:

Text and style could be defined using HTML/CSS.
litehtml renders it to image (with alpha channel).
Then it’s composited into timeline as normal.
Bonus: CSS styles could be shared as templates or pasted.

Just curious if that could be more feasible or lighter than Puppeteer in your opinion?

Thanks again!

shotcut · July 30, 2025, 12:50am

litehtml is a little interesting. At first, it seemed to be a lot of work to build a Qt integration, but I found KDE has an experimental one: Qt Project / playground / qlitehtml · GitLab

You say you do not need animation, but I will not work on something new without it. Even Text: Simple filter supports animating colors of text, outline, and background.

The idea with Puppeteer is to bundle it in Shotcut, which already has a JavaScript engine provided by Qt that can run it and talk to any installed Chrome/Chromium-based browser (Firefox does not support the transparent background feature). I think that will be better than trying to use QtWebEngine. Qt can also let Shotcut act as the web server for the content you & it creates and that chromium renders and puppeteer saves.

Here is a quick example from a CodePen you share I made using node.js, puppeteer, and Chromium.

Manuel_songokuh · August 6, 2025, 5:38pm

Wow — this is amazing!

Thank you so much for going the extra step and testing Puppeteer with my CodePen example. Seeing the gold 3D text rendered like that is already a huge confirmation that the idea is possible and beautiful.

And yes — I absolutely agree that animation support is important. If Puppeteer is bundled inside Shotcut and runs silently behind a simple user interface, that would be perfect. I imagine something like:

“Text Style Overlay” filter:

Write the text
Choose a CSS template
Preview result
Add to timeline (as image sequence with alpha)

That’s powerful and user-friendly — especially for creators who don’t want to deal with HTML/Node.js.

I also understand that you want animation from the beginning, but I suggest a small and clear first step:

First focus just on the static CSS visual styles (for beautiful 3D text, glow, gradients, shadows, etc.).

The user writes normal text, then applies a visual style, using copy-paste or importing a preset file.
→ For example, the system could have a “Style Preset” manager: save/load styles like user collections (e.g. gold-text, neon-glow, etc.).

Once this part is stable and working well — with importer/exporter and live preview —
then we can move to the second step: adding animations.
Otherwise, trying to do everything at once might create chaos in code or UI.

One more usability point:

To make the workflow fast and fluid:

One left click should allow direct editing of the text (like subtitles).
If the user wants to change the style, they can right-click → Properties / Style, and then open a panel to load/import/export CSS, or paste directly.

This would make Shotcut very efficient, without too many popups or extra clicks — perfect for fast creative editing.

Thanks again for taking this idea seriously. You’re really opening new doors for text graphics in video editing!

shotcut · August 10, 2025, 7:32pm

Getting Puppeteer or anything node.js-based for this to work in Qt was looking bad due to Qt’s older ECMAScript version and missing bits. But these things all simply use WebSockets to communicate with Chrome(ium)/Edge. I was able to use C++ with Qt WebSockets instead. It also supports animation, but CSS animation does not support the Web Animation API, which controls the timing for perfect frame accuracy. Instead, it snapshots the playback on a timer similar to a screen recording. I found the performance to be limited to around 30 fps. Here is an example

jonray · August 12, 2025, 8:56am

Wow, that looks impressive!

jonray · August 12, 2025, 2:27pm

Intrigued. Is this animation a HTML/CSS/JS file with transparent background?

shotcut · August 12, 2025, 3:53pm

No JavaScript! And I had to dig a little into the frame source to get plain old CSS instead of SCSS.

jonray · August 13, 2025, 8:27am

Hi Dan, interesting - so does that mean we could soon take any HTML/CSS text animation and make it into a text overlay in SC? That would be cool. Is an implementation/integration of this planned for SC?

For yours or anyone’s information/interest, I tried asking Perplexity “Can you convert this SCSS into plain CSS please?..” and send “him” (“it”) the SCSS code from the animation you gave above, and in 3 seconds it was converted for me, with some explanatory notes:

CSS code sent by Perplexity:

  HTML, BODY {
    height: 100%;
  }
  
  BODY {
    background: hsl(200, 70%, 11%);
    background-size: 0.12em 100%;
    font: 16em/1 Arial, sans-serif;
  }
  
  /* The equivalent of $colors: #360745, #D61C59, #E7D84B, #EFEAC5, #1B8798; */
  .text--line {
    font-size: 0.5em;
  }
  
  svg {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
  /* The equivalent of $max: 5; $stroke-step: 7%; */
  .text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 7% 28%; /* 7% * (5 - 1) = 28% */
    stroke-width: 3px;
    animation: stroke-offset 9s infinite linear;
  }
  
  /* Manually expand .text-copy for each child (1 through 5) */
  .text-copy:nth-child(1) {
    stroke: #360745;
    stroke-dashoffset: 7%;
  }
  .text-copy:nth-child(2) {
    stroke: #D61C59;
    stroke-dashoffset: 14%;
  }
  .text-copy:nth-child(3) {
    stroke: #E7D84B;
    stroke-dashoffset: 21%;
  }
  .text-copy:nth-child(4) {
    stroke: #EFEAC5;
    stroke-dashoffset: 28%;
  }
  .text-copy:nth-child(5) {
    stroke: #1B8798;
    stroke-dashoffset: 35%;
  }
  
  @keyframes stroke-offset {
    50% {
      stroke-dashoffset: 35%; /* 7% * 5 */
      stroke-dasharray: 0 87.5%; /* 7% * 5 * 2.5 = 87.5% */
    }
  }

Manuel_songokuh · August 13, 2025, 10:13am

Wow — did you see it? CSS looks magnificent! Beautiful, incredible!
But you actually skipped a step!

The first step should be the CSS filter for text without animation — just to make sure import/export works for CSS styles, save presets, etc.
Second step can be the animation part.
Instead, you jumped straight to step two.

Anyway, I think this would be super useful for newbies and could really attract new users to Shotcut.

So please let me know about step one: import/export for CSS filter.
We didn’t yet talk about how to start:

Double-click on a text clip in the timeline to edit the text immediately (no popup window).
If I want to modify the CSS filter, I can right-click → “Modify CSS Filter”, then open a dialog where I can import/export CSS styles, load presets, etc.

What do you think? Just imagine the interface like that.

shotcut · August 13, 2025, 5:36pm

I will not be making the UI you want because it is not consistent with how Shotcut works. Due to the nature of this it cannot be a filter, and it cannot be integrated with any existing text. A filter can only modify its input image. This must be a new kind of generator because you give it some text, and it must generate an image or image sequence or video. I decline to collaborate with you on the UI. Wait and see.

Manuel_songokuh · August 13, 2025, 8:21pm

Got it
I understand now about the “new generator” approach.
Thanks for clarifying the technical reason why it cannot be a filter.
I’ll wait and see how it develops — and I really hope CSS text styling can become part of it in some way.

Abhinandan_Pandey · August 14, 2025, 3:34pm

is any Dev working on this feature ?