How To Create A Lightning Text Effect Using HTML And CSS?

I wanted to recreate the following logo image using only HTML and CSS. For me it was important that the setup supports different font sizes and text content so that I can easily change the logo text and size without any code changes.

Piranhas Logo with Lightning Effect — © Piranhas.

Solution

1. Setup An HTML Container With Child Elements

<a href="/" class="logo__link">
    <span class="logo__name-pseudo">Piranhas</span>
    <span class="logo__name-top">Piranhas</span>
    <span class="logo__name-bottom">Piranhas</span>
</a>

My idea was to create 2 child elements containing the same text. I would clip one element to the upper half (.logo__name-top) and the other element to the lower part (.logo__name-bottom). Finally, I will displace the upper part to the left. That's it.

2. Add CSS Properties To HTML Container

.logo__link {
    position: relative;
    color: #ffff00;
    font-family: Outfit, Helvetica, sans-serif;
    font-style: italic;
    font-size: 5rem;
    font-weight: 900;
    text-decoration: none;
}

The position property is needed to allow absolute positioning of the child elements.
The other CSS properties are just used for styling.

Piranhas Logo: CSS Styling — © Piranhas.

3. Add CSS Properties To HTML Child Elements

.logo__name-top {
    position: absolute;
    top: 0;
    right: 0.05em;
    clip-path: inset(0% 0% 40% 0%);
}

The position property is needed to apply absolute positioning to the .logo__name-top element.
The right property is used to displace the text to the right.
The clip-path property is used to clip the text to the upper 40% and hide the rest.

.logo__name-bottom {
    position: absolute;
    top: 0;
    right: 0;
    clip-path: inset(60% 0% 0% 0%);
}

The position property is needed to apply absolute positioning to the .logo__name-top element.
This elements stays where is is and is not displaced.
The clip-path property is used to clip the text to the lower 60% and hide the rest.

Piranhas Logo: Offsetting The Clipped Area — © Piranhas.

As you can see, there are still some remaining issues.

Styling Issues

1. Avoid Clipped Areas For Italic Font Style

I needed to extend the clipping area to the right by adding -5% to the clip-path. Otherwise, some part of the text gets clipped away when using italic font style.

.logo__name-top {
    position: absolute;
    top: 0;
    right: 0.05em;
    clip-path: inset(0% -5% 40% 0%);
}
.logo__name-bottom {
    position: absolute;
    top: 0;
    right: 0;
    clip-path: inset(60% -5% 0% 0%);
}

Piranhas Logo: Avoid Clipped Areas For Italic Font Style — © Piranhas.

2. Parent Element Does Not Use Any Space

Since the child elements are using absolute positioning, they are out of the flow. Therefore, the parent element .logo__linkdoes not take any space and makes positioning the element difficult. You can manually position the parent element but when you change the logo text or size, you would need to manually update the positon of the parent element which is not sustainable.

Therefore, I added a "pseudo" child element in HTML with class .logo__name-pseudo containing the same text in the same style and size which is hidden just to reserve space for the clipped elements. Now the element reains in the flow.

.logo__name-pseudo {
    visibility: hidden;
}

3. Remove Thin Line Between Displaced Elements

There remains a thin line between the 2 elements and I couldn't figure out the reason. It depends also on the logo size. Sometimes it appears and sometimes not. I decided to extend the upper clip area and clip away just 39% instead of 40% of the bottom part. Therefore, the logos slightly overlap and the line is removed.

Ori Drori pointed me into the right direction on Stack Overflow. The line is caused by fractional pixels when the percent of the height does not result in an integer value. That also makes sense because the line didn't appear always but just for certain logo sizes. The issue can be fixed by rounding down the percent values by 1px: round(down, 40%, 1px) for .logo__name-top and round(down, 60%, 1px) for .logo__name-bottom.

.logo__name-top {
    position: absolute;
    top: 0;
    right: 0.05em;
    clip-path: inset(0% -5% round(down, 40%, 1px) 0%);
}
.logo__name-bottom {
    position: absolute;
    top: 0;
    right: 0;
    clip-path: inset(round(down, 60%, 1px) -5% 0% 0%);
}