{"id":5332,"date":"2012-05-31T12:06:42","date_gmt":"2012-05-31T12:06:42","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=5332"},"modified":"2012-05-31T12:06:42","modified_gmt":"2012-05-31T12:06:42","slug":"how-to-make-your-text-look-awesome-using-css3","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/","title":{"rendered":"How to make your text look awesome using CSS3"},"content":{"rendered":"

This post is part of our Ampersand series, a set of blog posts focused on fonts. We’re sponsoring and attending Ampersand 2012<\/a>, a typography conference based in Brighton.<\/i><\/p>\n

Between CSS3 and the sheer number of fonts now available for use on the web, text-based titles are starting to replace images more and more. As well as improving your page load speed and being better for search engine optimisation, text titles are extremely quick and easy to edit – particularly handy when you’re dealing with clients who change their mind frequently!<\/p>\n

With that in mind, we’ve put together a list of tutorials that will help you on your way to stunning titles without so much as a graphics program or a .png in sight.<\/p>\n

Using CSS Text Shadow to Create Cool Text Effects<\/h4>\n

Line 25 has a great article on CSS3 text effects for a series of striking results.<\/p>\n

\"\"<\/p>\n

3D Text<\/h4>\n

This is a pretty popular technique, and it’s much easier to do with CSS than an image. Check out the tutorial at markdotto.com<\/a>.<\/p>\n

\"\"<\/a><\/p>\n

CSS Text Rotation<\/h4>\n

This CSS text rotation tutorial<\/a> is a space-saving and attractive way to display dates on your blog.<\/p>\n

\"\"<\/a><\/p>\n

CSS Transforms Font Face Experiment<\/h4>\n

Completely created using CSS, this experiment<\/a> is well worth a look.<\/p>\n

\"\"<\/a><\/p>\n

Create Beautiful CSS3 Typography<\/h4>\n

Transform your website by adopting this attractive yet practical CSS3 typography<\/a>.<\/p>\n

\"\"<\/a><\/p>\n

Text Blur<\/h4>\n

Blurring text can create an extreme but eye catching look for your website. Check out Simurai’s post to find out more.<\/p>\n

\"\"<\/p>\n

CSS Gradient Text Effect<\/h4>\n

There are quite a few text effects in this article, but this one is the most impressive:<\/p>\n

\"\"<\/p>\n

CSS3 Text Shadow Effects<\/h4>\n

Great easy to follow tutorial from Crazy Egg<\/a>.<\/p>\n

\"\"<\/a><\/p>\n

Text Shadow<\/h4>\n

Handy CSS3 text shadow generator<\/a> – perfect if you don’t want to spend a lot of time tweaking and checking code.<\/p>\n

\"\"<\/a><\/p>\n

CSS3 Background Clip Font Face<\/h4>\n

Another excellent resource<\/a> from Trent Walton.<\/p>\n

\"\"<\/a><\/p>\n

Little Known Font Size Adjustment CSS3 Property<\/h4>\n

Make sure your text is presented properly with this uncommon tip<\/a>.<\/p>\n

\"\"<\/p>\n

Create a Vibrant Digital Poster Design with CSS3<\/h4>\n

This CSS3 poster tutorial helps you create a beautiful design in minutes.<\/p>\n

\"\"<\/p>\n

Introduction to CSS 3: Text Effects<\/h4>\n

More excellent CSS3 text effects<\/a>, this time from designshack.net.<\/p>\n

\"\"<\/a><\/p>\n

Full CSS3 Text Shadows – Even In IE<\/h4>\n

This tutorial helps you create cross-browser compatible shadows for your text.<\/p>\n

\"\"<\/a><\/p>\n

Fun with CSS Text Shadow<\/h4>\n

Trent Walton’s fun with CSS text shadow<\/a> experiment shows the power of CSS3.<\/p>\n

\"\"<\/a><\/p>\n

Text Embossing Effect<\/h4>\n

Excellent text embossing effect<\/a> from jankoatwarpspeed.com.<\/p>\n

\"\"<\/a><\/p>\n

CSS3 Text Shadows<\/h4>\n

Several CSS text shadow combinations that are easy to use.<\/p>\n

\"\"<\/p>\n

Neon Text Effect With jQuery<\/h4>\n

It’s not pure CSS but it’s a striking effect all the same – Neon Text Effect with jQuery<\/a>.<\/p>\n

\"\"<\/a><\/p>\n

Want more CSS3 effects? Check out 109 Awesome CSS3 Tutorials and Resources<\/a>.<\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

This post is part of our Ampersand series, a set of blog posts focused on fonts. We’re sponsoring and attending Ampersand 2012, a typography conference based in Brighton. Between CSS3…<\/p>\n","protected":false},"author":2,"featured_media":8209,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":{"0":"post-5332","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-your-website"},"yoast_head":"\nHow to make your text look awesome using CSS3 - Heart Internet<\/title>\n<meta name=\"description\" content=\"How to make your text look awesome using CSS3 - Written by the team at Heart Internet.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to make your text look awesome using CSS3 - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"How to make your text look awesome using CSS3 - Written by the team at Heart Internet.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-31T12:06:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1620\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"How to make your text look awesome using CSS3\",\"datePublished\":\"2012-05-31T12:06:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/\"},\"wordCount\":479,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg\",\"articleSection\":[\"Your Website\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/\",\"name\":\"How to make your text look awesome using CSS3 - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg\",\"datePublished\":\"2012-05-31T12:06:42+00:00\",\"description\":\"How to make your text look awesome using CSS3 - Written by the team at Heart Internet.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg\",\"width\":1620,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to make your text look awesome using CSS3\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to make your text look awesome using CSS3 - Heart Internet","description":"How to make your text look awesome using CSS3 - Written by the team at Heart Internet.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/","og_locale":"en_GB","og_type":"article","og_title":"How to make your text look awesome using CSS3 - Heart Internet","og_description":"How to make your text look awesome using CSS3 - Written by the team at Heart Internet.","og_url":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2012-05-31T12:06:42+00:00","og_image":[{"width":1620,"height":720,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"How to make your text look awesome using CSS3","datePublished":"2012-05-31T12:06:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/"},"wordCount":479,"commentCount":3,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg","articleSection":["Your Website"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/","url":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/","name":"How to make your text look awesome using CSS3 - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg","datePublished":"2012-05-31T12:06:42+00:00","description":"How to make your text look awesome using CSS3 - Written by the team at Heart Internet.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2015\/06\/category_your_website1.jpg","width":1620,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/how-to-make-your-text-look-awesome-using-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"How to make your text look awesome using CSS3"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/5332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=5332"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/5332\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/8209"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=5332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=5332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=5332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}