{"id":23417,"date":"2015-03-09T23:01:04","date_gmt":"2015-03-09T15:01:04","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23417"},"modified":"2021-04-29T17:01:15","modified_gmt":"2021-04-29T09:01:15","slug":"css-text-effects","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/","title":{"rendered":"15 Beautiful Text Effects Created with CSS"},"content":{"rendered":"<p>Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or typography. With CSS, you can use clipping and add animation to text to spice things up a little.<\/p>\n<p>And to illustrate this, we have collected <strong>15 stunning and cool text effects that are made possible with CSS<\/strong> (some with a little help from Javascript codes).<\/p>\n<p><strong>For more things you can do with CSS, check out:<\/strong><\/p>\n<ul>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/built-with-css\/\" rel=\"noopener\">18 cool things you won\u2019t believe were built using CSS<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/jquery-text-effect-libraries\/\" rel=\"noopener\">30 jQuery text effect libraries you need to know<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-heart-shape\/\" rel=\"noopener\">How to create heart shape with CSS<\/a><\/li>\n<li><a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/animatecss-css3-animation-library\/\" rel=\"noopener\">Animate.css \u2013 CSS3 library to create animation easily<\/a><\/li>\n<\/ul>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/yoksel\/pen\/XJbzrO\">Elastic stroke Animation<\/a><\/h2>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"yoksel\" data-slug-hash=\"XJbzrO\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Elastic stroke CSS + SVG\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/yoksel\/pen\/XJbzrO\"> Elastic stroke CSS + SVG<\/a> by yoksel (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/yoksel\">@yoksel<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/DirkWeber\/pen\/ArFvk\">SVG Glitch<\/a><\/h2>\n<p>Want to make effects that look like a broken analog TV? <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/DirkWeber\">Dirk Weber<\/a> made this stunning glitch effect using CSS and SVG filter.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"DirkWeber\" data-slug-hash=\"ArFvk\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"SVG Glitch\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/DirkWeber\/pen\/ArFvk\"> SVG Glitch<\/a> by Dirk Weber (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/DirkWeber\">@DirkWeber<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/hugo\/pen\/AFaiB\">Shop Talk logo<\/a><\/h2>\n<p>The <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/shoptalkshow.com\/\">Shop Talk<\/a> logo is recreated   by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/hugo\">Hugo<\/a> using only CSS. The logo looks similar to the original, complete with the right texture.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"hugo\" data-slug-hash=\"AFaiB\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Shop Talk logo made in CSS \"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/hugo\/pen\/AFaiB\"> Shop Talk logo made in CSS <\/a> by Hugo Darby-Brown (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/hugo\">@hugo<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/robertmesserle\/pen\/Lebco\">Slashed Effect<\/a><\/h2>\n<p>This idea by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/robertmesserle\/\">Robet Messerle<\/a> gives the knife sliced effect, done with less than 70 lines of CSS.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"robertmesserle\" data-slug-hash=\"Lebco\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Slashed CSS Effect\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/robertmesserle\/pen\/Lebco\"> Slashed CSS Effect<\/a> by Robert Messerle (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/robertmesserle\">@robertmesserle<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/juanbrujo\/pen\/yGpAK\">Elegant Shadow Effect<\/a><\/h2>\n<p>Long Shadow effect comes to text, made using CSS. The creator, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/juanbrujo\">Juan Brujo<\/a> made 4 other effects but this is easily the most impressive one.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"juanbrujo\" data-slug-hash=\"yGpAK\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS3 text-shadow effects\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/juanbrujo\/pen\/yGpAK\"> CSS3 text-shadow effects<\/a> by Jorge Epu\u00f1an (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/juanbrujo\">@juanbrujo<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/andreas_pr\/pen\/QwLZVZ\">Foggy text effect<\/a><\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/andreas_pr\">Andreas<\/a> creates an awesome cinematic foggy effect. Applicable on  Webkit browsers only.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"andreas_pr\" data-slug-hash=\"QwLZVZ\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Foggy text effect\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/andreas_pr\/pen\/QwLZVZ\"> Foggy text effect<\/a> by andreas_pr (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/andreas_pr\">@andreas_pr<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/fixcl\/pen\/CHgrn\">SVG text mask<\/a><\/h2>\n<p>A design by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/fixcl\">Marco Barria<\/a> shows an elegant text masking effect on a large background image.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"css,result\" data-user=\"fixcl\" data-slug-hash=\"CHgrn\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"SVG text mask\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/fixcl\/pen\/CHgrn\"> SVG text mask<\/a> by Marco Barr\u00eda (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/fixcl\">@fixcl<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/yoannhel\/pen\/sJpDj\">Text Animation<\/a><\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/yoannhel\">Yoann<\/a> created an awesome ticker effect with this text animation. Watch how the second word alternates between three words.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"yoannhel\" data-slug-hash=\"sJpDj\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Text animation\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/yoannhel\/pen\/sJpDj\"> Text animation<\/a> by Yoann (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/yoannhel\">@yoannhel<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/ThatGuySam\/pen\/CytDA\">Hit The Floor<\/a><\/h2>\n<p>This 3D effect by <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/ThatGuySam\">ThatGuySam<\/a> is a simple play on text-shadows, but with an awesome result.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"ThatGuySam\" data-slug-hash=\"CytDA\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Hit The Floor Text Effect\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/ThatGuySam\/pen\/CytDA\"> Hit The Floor Text Effect<\/a> by ThatGuySam (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/ThatGuySam\">@ThatGuySam<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/Jintos\/pen\/crlxk\">Background Clip Text<\/a><\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/Jintos\">Jintos<\/a> was playing around with a Webkit background clip to add a background image inside text. He made 16 cool creations using this method.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"Jintos\" data-slug-hash=\"crlxk\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"-webkit-background-clip:text CSS effect \"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/Jintos\/pen\/crlxk\"> -webkit-background-clip:text CSS effect <\/a> by Jintos (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/Jintos\">@Jintos<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/moklick\/pen\/tAlJB\">CSS Text-FX<\/a><\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/moklick\/\">Moklik<\/a> added dimmed light effect to the text, giving you intermittent flashes that warn of danger from afar.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"moklick\" data-slug-hash=\"tAlJB\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"CSS Text-FX\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/moklick\/pen\/tAlJB\"> CSS Text-FX<\/a> by moklick (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/moklick\">@moklick<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/ghepting\/pen\/xnezB\">Animated signing of signature<\/a><\/h2>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/ghepting\">Gary Hepting<\/a> created a real-time signing animation. This works by applying Javascript to the SVG path to animate the signing.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"ghepting\" data-slug-hash=\"xnezB\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Animated signing of signature (SVG paths)\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/ghepting\/pen\/xnezB\"> Animated signing of signature (SVG paths)<\/a> by Gary Hepting (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/ghepting\">@ghepting<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/mistic100\/pen\/zAren\">Colorful Glitchy 404<\/a><\/h2>\n<p>Can you hear the sound of this glitch and feel the vibration, inside your head? That\u2019s how good this glitch effect is. <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/mistic100\/\">mistic100<\/a> made with CSS plus a bit of Javascript.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"js,result\" data-user=\"mistic100\" data-slug-hash=\"zAren\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Colorful Glitchy 404\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/mistic100\/pen\/zAren\"> Colorful Glitchy 404<\/a> by mistic100 (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/mistic100\">@mistic100<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/captainbrosset\/pen\/JoZabN\">Cosmos<\/a><\/h2>\n<p>Now this is an elegant and inspiring logo. It is also suitable for use for \u201cCosmos\u201d, because orbits, get it?<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"result\" data-user=\"captainbrosset\" data-slug-hash=\"JoZabN\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"COSMOS\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/captainbrosset\/pen\/JoZabN\"> COSMOS<\/a> by Patrick Brosset (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/captainbrosset\">@captainbrosset<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<h2><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/\/igloude\/pen\/ByVYZK\">Loading<\/a><\/h2>\n<p>A cool loading effect that is simply the hiding and displaying of letters.<\/p>\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"light\" data-default-tab=\"css,result\" data-user=\"igloude\" data-slug-hash=\"ByVYZK\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"ByVYZK\"> <span>See the Pen <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/igloude\/pen\/ByVYZK\"> ByVYZK<\/a> by Ian Gloude (<a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/igloude\">@igloude<\/a>)\n  on <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span><\/p>\n<p><script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or typography. With CSS, you can use clipping and add animation to text to spice things up a little. And to illustrate this, we have collected 15 stunning and cool&hellip;<\/p>\n","protected":false},"author":141,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>15 Beautiful Text Effects Created with CSS - Hongkiat<\/title>\n<meta name=\"description\" content=\"Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or\" \/>\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.hongkiat.com\/blog\/css-text-effects\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"15 Beautiful Text Effects Created with CSS\" \/>\n<meta property=\"og:description\" content=\"Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-09T15:01:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-29T09:01:15+00:00\" \/>\n<meta name=\"author\" content=\"Agus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bagusdesain\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Agus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-text-effects\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-text-effects\\\/\"},\"author\":{\"name\":\"Agus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\"},\"headline\":\"15 Beautiful Text Effects Created with CSS\",\"datePublished\":\"2015-03-09T15:01:04+00:00\",\"dateModified\":\"2021-04-29T09:01:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-text-effects\\\/\"},\"wordCount\":612,\"commentCount\":33,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-text-effects\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-text-effects\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-text-effects\\\/\",\"name\":\"15 Beautiful Text Effects Created with CSS - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"datePublished\":\"2015-03-09T15:01:04+00:00\",\"dateModified\":\"2021-04-29T09:01:15+00:00\",\"description\":\"Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-text-effects\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-text-effects\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-text-effects\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"15 Beautiful Text Effects Created with CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b23dad06815dff0bcc222088bed549dd\",\"name\":\"Agus\",\"description\":\"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/bagusdesain\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/agus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"15 Beautiful Text Effects Created with CSS - Hongkiat","description":"Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or","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.hongkiat.com\/blog\/css-text-effects\/","og_locale":"en_US","og_type":"article","og_title":"15 Beautiful Text Effects Created with CSS","og_description":"Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or","og_url":"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-03-09T15:01:04+00:00","article_modified_time":"2021-04-29T09:01:15+00:00","author":"Agus","twitter_card":"summary_large_image","twitter_creator":"@bagusdesain","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Agus","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/"},"author":{"name":"Agus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd"},"headline":"15 Beautiful Text Effects Created with CSS","datePublished":"2015-03-09T15:01:04+00:00","dateModified":"2021-04-29T09:01:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/"},"wordCount":612,"commentCount":33,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-text-effects\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/","url":"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/","name":"15 Beautiful Text Effects Created with CSS - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"datePublished":"2015-03-09T15:01:04+00:00","dateModified":"2021-04-29T09:01:15+00:00","description":"Beautiful text or typography will make your design look attractive. In web design, CSS helps to give style to design including various effects in text or","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-text-effects\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-text-effects\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"15 Beautiful Text Effects Created with CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b23dad06815dff0bcc222088bed549dd","name":"Agus","description":"Agus is a music enthusiast, backpacker and code writer. He has an ambition to build a Skynet on top of HTML and CSS.","sameAs":["https:\/\/x.com\/bagusdesain"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/agus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-65H","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23417"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23417\/revisions"}],"predecessor-version":[{"id":54498,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23417\/revisions\/54498"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23417"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}