10 Beautiful CSS Text Effects

CSS3 comes with an unlimited number of possibilities and options to play with a website. There is no dearth of choices when it comes to the images, effects, background music or displays, cross browser support or various text styles designers can select. These effects are very easy to use and can be applied with the help of a step-by-step tutorial provided online.

There are also various forums that allow designers to gain knowledge about latest developments and options available. These forums also will respond to questions. Designers with a basic understanding of website development can learn these options easily.

There are various text effects available which can be applied you make the websites more appealing.

Here are some of the options for text effects:

1. Text Rotation

This feature by Johathan Snook lets designers display the text in all angles.  It is good to display the dates, calendar, vCard details and other images where text needs to be displayed without any comma and in one block.


2. Shadow Effect

This has been around since the creation of Microsoft word. But Juan Brujo has tried to play with it by allowing the users to increase or decrease the effect as and when needed.


3. Slashed Effect

This is a very small code that gives a “knife sliced” effect on the text, written by Robert Messerle. It is good for using in games or mystery websites.


4. Animation Text

This is also a short code that allows animation to be added to text. It allows designers to create a number of effects in even a short sentence.


5. Background Clip Text

With this code designers can display any image in the background of  the text. The image will appear distorted and highlight only the text. Jintos designed this code while playing with Webkit background clip and now has over 16 cool creations.


6. Animated Signature

This is a super cool effect that makes a signature appear on a website. The author created a real time signing animation which works by applying Javascript to SVG path and then animating the signature.


7. Cosmos

So welcome to Star trek. This simple code makes the logos and titles appear in cosmo state while encircling an orbit. Super cool effect for Geeks!!


8. Elastic Stroke Animation

This effect is available in HTML and CSS and allows designers to play with a color stroke for the text which appears on the screen. When used creatively, this is an awesome effect!


9. Foggy Text Effect

This is an animation effect where the text appears hazy and foggy. It is only for Webkit browsers though.


10. Hit the Floor

A wonderful 3D effect which plays on shadow of a word.


Let us know how some of these ideas helped to create an attractive and fun website.

5 Reasons to Learn CSS3

Cascading Style Sheets  known as “CSS” are one of the most important languages used to control the look of the websites. Web developers can easily control the fonts, layouts, background, texture, color and margin of the website when using CSS. The latest version, CSS3, allows users to create stunning websites with drop shadows, animation and […]

Read on...

13 Sites to Help Developers Learn and Master CSS

CSS can be a tad bit tricky to learn without good guidance. Here are some of the top sites that will make your CSS learning experience fun and worthwhile. 1. A List Apart CSS Topics A List Apart CSS Topics is a site that archives articles on CSS, which ranges back to the ‘90s. Primarily meant […]

Read on...

12 Top PSD to HTML/CSS Tutorials

Designing a website can be a bit of a tedious job, but having a Photoshop mock up certainly helps. With Photoshop, creating a design is easy. These designs are then converted to HTML/CSS, which is time saving and simple. Here are a few tutorials which will help designers convert PSD files to HTML/CSS: 1. Convert Your Product Landing Page […]

Read on...

Top 10 HTML and CSS Books for Developers

As a web developer, it is important to stay updated with the latest developments with HTML, CSS and jQuery. Every developer should take time to read the latest news and updates in order to gain expertise for current web creation scenarios. Here is a list of 10 must read HTML and CSS books for programmers: […]

Read on...

How to Manage Your Webpage’s Layout with CSS

Before CSS was out, people used tables in order to layout their webpages. Now, the introduction of CSS changed all that. CSS provides us with a lot of flexibility to position the elements in a webpage. In this tutorial we’re going to dive into the two main CSS properties used to defining layout of webpages: […]

Read on...

Creating Simple and Interactive Pricing Tables in CSS

In this tutorial we’re going to learn how to create some cool looking and interactive pricing tables, In pure CSS! Usually the pricing tables are created using static images which follows the process of making them interactive, but the technique we’ll learn today will facilitate the process and will allow us to create beautiful pricing […]

Read on...

Five Informative CSS Blogs All Designers Should Follow


The days are over when we would depend on designers and developers to help create and update our websites. Now, with CSS available on the market, working on our own websites have become simple and hassle free. CSS is flexible and it is extremely easy to create code. If you have your own website, or are working […]

Read on...

Creating Custom Flat and Flipping Style CSS Checkboxes

In this tutorial, we will create some flat style toggle switches purely using CSS. Those switches could be used instead of the generic, dull looking, checkboxes. Usually, while we are creating new websites, we use checkboxes to give users the option to select certain things on the site. Most of the time those standard checkboxes […]

Read on...

Learn HTML5 and CSS3 with these Resources

The much asked for programming languages in the world of web designing are HTML5 and CSS3 . As a web designer planning to make a career in this field, you must learn these languages. Web developers have stopped using javascript and Flash to some extent,after the introduction of these two languages, which explains the need […]

Read on...