Making an Underwater CSS Text Effect

Web design can serve as a playful exploration ground for learning new techniques. In today’s guide, we’ll dive into the creation of an underwater CSS text effect, not just for the visual outcome, but to deepen our understanding of how different CSS properties harmonize to create dynamic text effects.

Setting up the Structure

Our journey into the deep sea starts with a simple HTML structure: a div element with the class underwater, wrapping around an h1 tag.

<div class=”underwater”>
<h1>1stWebDesigner</h1>
</div>

Achieving the Underwater Effect

For our underwater CSS text effect, we introduce a range of CSS properties such as background-image, animation, and -webkit-background-clip.

@import url(‘https://fonts.googleapis.com/css2?family=Maven+Pro:wght@700&amp;display=swap’);

body{
/* Using a dark background color for optimal contrast */
background-color: #000;
font-family: ‘Maven Pro’, sans-serif;
}

.underwater h1{
/* Font settings: sizing and a semi-transparent color */
font-size: 2.5rem;
color: #2c3e5010;

/* Assigning an underwater image as the background */
background-image: url(‘https://w7.pngwing.com/pngs/183/509/png-transparent-under-water-scenery-sunlight-underwater-ray-star-ocean-atmosphere-cloud-computer-wallpaper.png’);

/* Clipping the background image to the outline of the text */
-webkit-background-clip:text;

/* Setting a 10s infinite animation for a dynamic effect */
animation: waterEffect 10s infinite;
}

/* Animation to simulate flowing water */
@keyframes waterEffect {
0% { background-position: left 0 top 0; }
100% { background-position: left 100% top 0; }
}

Explaining Key CSS Properties and Values

Breaking down our CSS code, the first point of interest is the background-image property. By setting an underwater image as the background, we immediately set the tone for our effect.

The -webkit-background-clip:text property clips the background image to the shape of the text. It allows the underwater image to fill the text, setting the stage for our effect.

The color property plays a vital role as well. We’re using a semi-transparent color (color: #2c3e5010;), where the last two digits 10 represent the alpha channel in hexadecimal format, controlling the transparency. This enables the background image to shine through, enhancing the underwater illusion.

The animation property sets our waterEffect animation into motion. Defined by the @keyframes rule, it continuously shifts the background-position from left 0 top 0 to left 100% top 0, creating the illusion of water flowing over the text.

The Result

See the Pen
Underwater Text Effect by 1stWebDesigner (@firstwebdesigner)
on CodePen.

Exploring Other Methods

Different methods can achieve similar effects. An alternate approach involves utilizing the clip-path property with CSS animations, yielding a wavy text appearance akin to an underwater CSS text effect. This method manipulates the clip region of an element over time, evoking a dynamic sense of movement reminiscent of water’s rhythmic flow. In addition, the technique doesn’t necessitate a background image, instead, it transforms the appearance of the text directly. By turning to this method, you’re exposed to yet another aspect of CSS and its potential for dynamic text effects.