CSS Style

Custom Properties

.terminal {
    --color: green;
    --background: white;
    --link-color: darkblue;
}

Size

.terminal {
    --size: 1.5;
}

You can change the size depending on the size of the terminal (browser window) using media queries.

See Responsive Font Size

Style just the cursor

.cmd-cursor {
    --original-color: white;
}

Check this Codepen demo to see the styling of a different parts of the terminal.

Glow

From version 2.29.0 there is css variable that can be easily used to enable glow effect:

.terminal {
    --color: rgba(0, 200, 0, 0.99);
    --animation: terminal-glow;
    --glow: 1;
}

From version 2.31.0 you don't need to change animation to have glow on the cursor.

See Glow Demo

Using custom properties with formatting

You can use custom properties on a single piece of text that you render using echo.

See Attribute Formatter.

Creating Terminal that fits into 3D image

You can use CSS transform to fit the terminal into any image. An example image of a computer or laptop. Here is a demo that shows how to calculate the matrix needed for transformation.

Using Terminal style outside of Terminal

If you want to use links with the same style as the terminal or set background/color in one place. For instance if you want footer in same style as the terminal you can use this code (added in 2.32.0):

<div class="terminal external">
   this is random text with <a href="https://example.com">link</a>
<div>

Reduced motion

You can respect user settings and disable cursor animation with this bit of CSS:

@media (prefers-reduced-motion) {
    :root {
        --animation: terminal-none;
    }
}

animation-none was added in version 2.33.0. The above CSS is the default since version 2.34.0.

See also

• responsive font size