--- title: CSS Typing Effect | daily.dev description: This is a typing demo. Did you know that you can create a typing effect with zero JavaScript? This is specifically useful when you can't use JavaScript. Like... canonical: https://daily.dev/posts/css-typing-effect-zfpxxebg5 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: CSS Typing Effect | daily.dev og:description: This is a typing demo. Did you know that you can create a typing effect with zero JavaScript? This is specifically useful when you can't use JavaScript. Like... og:url: https://daily.dev/posts/css-typing-effect-zfpxxebg5 og:image: https://api.daily.dev/og/posts/ZFpXXeBg5.png og:image:alt: CSS Typing Effect og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # CSS Typing Effect **[Hashnode](https://daily.dev/sources/hashnode)** · [@denicmarko](https://daily.dev/denicmarko) · 25 upvotes · 3 comments ## Summary This is a typing demo. Did you know that you can create a typing effect with zero JavaScript? This is specifically useful when you can't use JavaScript. Like here, on Hashnode. Enjoy! The code is available on codepen.io/denic. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@malek\_smida** · 3 upvotes > Thank you Marko! I've seen this effect before and I was interested, now you just give me the chance to learn! **@ahacad** · 1 upvotes > Simple yet powerful css effect. Very nice. **@al\_v\_a\_ro** · 1 upvotes > WOW. So Simple. Please take note of the step Param in the CSS Animation Property. --- Tags: [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css) [View this post on daily.dev](https://daily.dev/posts/css-typing-effect-zfpxxebg5) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"CSS Typing Effect","url":"https://daily.dev/posts/css-typing-effect-zfpxxebg5","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/css-typing-effect-zfpxxebg5"},"datePublished":"2020-10-14T06:38:28.873Z","dateModified":"2021-10-07T14:17:10.317Z","description":"This is a typing demo. Did you know that you can create a typing effect with zero JavaScript? This is specifically useful when you can't use JavaScript. Like...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/0108549b4d475698ab166b8c21d93444","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/0108549b4d475698ab166b8c21d93444","isAccessibleForFree":true,"articleSection":"Hashnode","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Person","name":"Marko Denic","url":"https://daily.dev/denicmarko","image":"https://lh3.googleusercontent.com/a-/AOh14GjKNvEa8cLkBcuu66EkMDR5AxsgErwMfRngopPRUg=s100","description":"Doer.","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":630}},"commentCount":3,"discussionUrl":"https://daily.dev/posts/css-typing-effect-zfpxxebg5","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":25},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"javascript,css"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Hashnode","item":"https://daily.dev/sources/hashnode"},{"@type":"ListItem","position":3,"name":"CSS Typing Effect"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/css-typing-effect-zfpxxebg5","comment":[{"@type":"Comment","text":"Thank you Marko! I’ve seen this effect before and I was interested, now you just give me the chance to learn!","datePublished":"2020-10-14T11:10:02.613Z","url":"https://daily.dev/posts/ZFpXXeBg5#c-gOSBw94bL","author":{"@type":"Person","name":"malek smida","url":"https://daily.dev/malek_smida","image":"https://lh3.googleusercontent.com/a-/AOh14GjySZYCECYuuVA6J7zzrVs73Iawe5UC6jEcBSuMWQ=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Simple yet powerful css effect. Very nice.","datePublished":"2020-10-14T14:21:18.237Z","url":"https://daily.dev/posts/ZFpXXeBg5#c-KWksCCqd1","author":{"@type":"Person","name":"Ahacad","url":"https://daily.dev/ahacad","image":"https://avatars1.githubusercontent.com/u/51874356?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"WOW. So Simple. Please take note of the step Param in the CSS Animation Property.","datePublished":"2020-10-14T13:04:41.745Z","url":"https://daily.dev/posts/ZFpXXeBg5#c-dKwGwasUH","author":{"@type":"Person","name":"Cornelius Müller","url":"https://daily.dev/al_v_a_ro","image":"https://avatars0.githubusercontent.com/u/26606825?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```