Display Text in Vertical Direction using CSS

This tutorial will show how to display text in the vertical orientation. We use CSS for displaying floating text in the vertical direction.

In this example, we have a background image with a transparent vertical tagline to show text. The floating vertical text will provide a rich and modern look.

View Demo

HTML and CSS to Display Vertical Caption

The following code shows the HTML and the styles required to display a vertical caption for a background image. Using CSS, we rotate the text with a 90-degree angle left to display it in the vertical orientation.

And we used a transparent tagline to display the vertical caption for the background.

<style>

	#vertical-orientation {

		float: left;

		transform: rotate(90deg);

		transform-origin: left top 0;

		margin-left: 50px;

		padding: 10px;

		background-color: rgba(37, 34, 34, 0.3);

		opacity: 0.9;

		font-size: 1.8em;

		color: #FFF;

		text-transform: uppercase;

	}

	#image-golf {

		background:url("golf.jpg");

		width: 600px;

		height: 350px;

	}

</style>

<h1>Demo Display Text in Vertical Direction using CSS</h1>

<div class="demo-content">

	<div id="image-golf">

	<div id="vertical-orientation">Vertical Direction</div></div>

</div>

View Demo