sia.hackernoon.com

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.

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.

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.

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%);
}

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. Eventually, it is a rendering issue. 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. If you have a better solution, let me know in the comments.

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

Here is the final code on CodePen. Feel free to use.

Originally published on March 13th, 2025 on Philip's Notes.

Create A Lightning Text Effect Using HTML And CSS Using This Simple Code