Display Text in Vertical Direction using CSS

In this tutorial, we are going to see how to display a text in vertical orientation. We use CSS for displaying a floating text in vertical direction. In this example we are having a background image with a transparent vertical tagline to show a 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 90 degree angle left to display it in vertical orientation. And we used a transparent tagline to display the vertical caption for the background.

	#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 {
		width: 600px;
		height: 350px;
<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>

View DemoDownload

This CSS code tutorial was published on July 4, 2016.

↑ Back to Top