Translation style

Open Page Translation → Translation display style in the settings. The preview shows the result as you change it.

Preset styles

Style	What it looks like
None	Plain text, like the original
Text color	The translation in the accent colour (the default)
Background	A soft highlight behind the translation
Weakened	The translation lighter than the original
Blur effect	Blurred until you hover over it, to test yourself
Blockquote	A bar on the left, like a quotation
Dashed line	Underlined with a dashed line
Border	A thin box around the translation

Your own CSS

Turn on Use custom CSS style and write CSS in the editor. Translations carry the attribute data-read-frog-custom-translation-style="custom", so start your rules with that selector:

[data-read-frog-custom-translation-style='custom'] {
  color: #414535;
  background-color: light-dark(#f2e3bc, #c19875);
  padding: 2px 4px;
  border-radius: 4px;
}

The editor checks the CSS as you type and saves it with Save. Any CSS works, including fonts, transitions and animations.

Ideas

Hide the translation until you hover over it:

[data-read-frog-custom-translation-style='custom'] {
  filter: blur(5px);
  transition: filter 0.2s;
}

[data-read-frog-custom-translation-style='custom']:hover {
  filter: none;
}

A different font for one language, using the lang attribute the translation carries:

[data-read-frog-custom-translation-style='custom']:lang(ja) {
  font-family: "Hiragino Mincho ProN", serif;
}

light-dark() picks the first colour on light pages and the second on dark ones, so one rule fits both.