Skip to content Skip to sidebar Skip to footer
Close

Making an Underwater CSS Text Effect

Published on January 7th, 2025

Introduction

CSS (Cascading Style Sheets) has long been used to enhance the visual appeal of web content, and one of the most creative ways to engage visitors is by adding unique text effects. One such effect is the underwater CSS text effect, which creates the illusion that your text is submerged in water, complete with ripple and wave-like effects. This creative text styling is perfect for websites related to the ocean, underwater adventures, or any theme that involves water.

In this article, we will show you how to create an underwater text effect using simple HTML and CSS. Whether you’re new to web design or an experienced developer, this step-by-step guide will help you bring an immersive underwater feel to your website.

1. Understanding the Underwater CSS Text Effect

The underwater CSS text effect mimics the appearance of text floating or submerged in water. It often involves animated waves, bubbles, or ripples passing through the text, creating the illusion of being underwater. These effects can be achieved using CSS animations, transitions, and background effects, which are all browser-native features that don’t require JavaScript.

This type of text effect can be a fun addition to creative websites, adding dynamic visual appeal. The effect can be as subtle or as dramatic as you prefer, depending on how you style the text and animations.

2. Basic Setup: HTML and CSS

Before we dive into the actual effect, let’s set up a basic HTML and CSS structure to get started.

HTML Structure

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underwater CSS Text Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="underwater-effect">
<h1>Underwater Text Effect</h1>
</div>
</body>
</html>

CSS Setup

The CSS will contain the styles for the basic page layout, font, and the effect itself.

css
/* Global styles */
body {
font-family: Arial, sans-serif;
background-color: #0e3b56; /* Dark blue background */
color: #ffffff; /* White text color */
text-align: center;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

/* Underwater effect */
.underwater-effect h1 {
font-size: 4em;
position: relative;
display: inline-block;
color: #00c6ff; /* Light blue text */
text-shadow: 0 0 8px rgba(0, 0, 255, 0.6), 0 0 12px rgba(0, 0, 255, 0.6);
}

This basic setup will display a large piece of text in a dark blue background, using a light blue text color to simulate the feeling of underwater.

3. Adding Wave Animation for the Underwater Effect

To make the text appear as if it’s underwater, we’ll add a wave animation that will gently move the text, mimicking the flow of water. This will involve creating a keyframe animation in CSS.

CSS Wave Animation

css
@keyframes wave {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(-5deg);
}
100% {
transform: translateY(0) rotate(5deg);
}
}

.underwater-effect h1 {
animation: wave 4s infinite ease-in-out;
}

The @keyframes rule defines the wave animation. The translateY function moves the text vertically to simulate the effect of floating in water, and the rotate function gives a slight tilting effect, which makes it appear more natural. The animation runs infinitely and loops every 4 seconds.

4. Adding Bubbles for Extra Realism

One common underwater effect is bubbles rising through the water. To achieve this, we can add small circles that rise upward behind the text to simulate the effect of bubbles.

CSS Bubbles Animation

css
.bubble {
position: absolute;
width: 20px;
height: 20px;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: bubbleRise 6s infinite ease-in-out;
}

@keyframes bubbleRise {
0% {
transform: translateY(100vh);
opacity: 1;
}
100% {
transform: translateY(-50vh);
opacity: 0;
}
}

This CSS creates small, white, circular elements that float upward. They start from the bottom of the screen and move upward until they fade out. You can adjust the size, speed, and number of bubbles to fit the theme.

To add the bubbles in the HTML:

html
<div class="bubble" style="left: 10%;"></div>
<div class="bubble" style="left: 30%;"></div>
<div class="bubble" style="left: 50%;"></div>
<div class="bubble" style="left: 70%;"></div>
<div class="bubble" style="left: 90%;"></div>

Each bubble will float from the bottom of the screen to the top, adding an extra layer of immersion to the underwater effect.

5. Customizing the Effect

You can take the underwater text effect to the next level by experimenting with the following:

  • Background Images: Add background images of underwater scenes to further enhance the effect.
  • Multiple Animations: Layer multiple animations, such as slight water ripple effects and different types of bubbles.
  • Color Gradients: Use blue and green gradient backgrounds to simulate the depth of water.

These adjustments can help you create a more dynamic and engaging underwater experience for your users.

Conclusion

The underwater CSS text effect is a fun and visually appealing way to bring a unique touch to your website. By using CSS animations, wave effects, and floating bubbles, you can simulate the feeling of being submerged in water. This effect works well for websites related to water activities, marine life, and even creative storytelling.

With a little creativity and some basic CSS, you can create immersive, eye-catching effects that will captivate your website’s visitors. Experiment with different animations and styles to make the effect uniquely yours and enhance your website’s overall design.

Leave a comment