CSS Text Styles | Bypeople

deals

premiumpacks & css text styles (51 items)

Curated list of CSS Text Styles and effects delivered as snippets to create beautiful websites, headers, banners, and interfaces. These CSS effects serve a variety of purposes, like text over image, text shadows, text animations, hovers, and much more!

freebies

Great looking CSS and JS text effect created by codepen user Lara, this lightweight code snippet allows for the creation of a neat word switching a...

Great looking CSS and JS text effect created by codepen user Lara, this lightweight code snippet allows for the creation of a neat word switching and glitching effect, which adapts the word size and the space available for them within the sentence dynamically. Definitely worth taking a look at.

A CSS snippet published by codepen user giana, allows creating nice, animated shimmering neon effects for text.

A CSS snippet published by codepen user giana, allows creating nice, animated shimmering neon effects for text.

A snippet that allows for fun text on image color blending with amazing and visually appealing results.

A snippet that allows for fun text on image color blending with amazing and visually appealing results.

4000+ Design Resources Megabundle, Only $19! 1.600+ PS Brushes, 2000 Vector Icons, 500 High-Res Patterns, Photoshop Actions, Professional Fonts, an...

4000+ Design Resources Megabundle, Only $19! 1.600+ PS Brushes, 2000 Vector Icons, 500 High-Res Patterns, Photoshop Actions, Professional Fonts, and Presentation Templates (97% Off)

A cool website that shows several text animations for you to get inspired. You can grab the code provided within each snippet, and add it to your w...

A cool website that shows several text animations for you to get inspired. You can grab the code provided within each snippet, and add it to your website.

Animography is a text editor that will give each letter an animation when hovering with the cursor. It is easily customizable and the site shows th...

Animography is a text editor that will give each letter an animation when hovering with the cursor. It is easily customizable and the site shows the preview of how the animation will look.

This a CSS 3D effect for text, it wraps the text with an animation around a box. It has the option to customize the color, font family, shadows and...

This a CSS 3D effect for text, it wraps the text with an animation around a box. It has the option to customize the color, font family, shadows and the speed at which the text moves.

Ultimate PS Actions Pack: 2500 Photoshop Actions, Only $19! Huge Selection Of Styles Like Painting, Light Leaks, HDR, Bubble, Neon, Vintage, Duoton...

Ultimate PS Actions Pack: 2500 Photoshop Actions, Only $19! Huge Selection Of Styles Like Painting, Light Leaks, HDR, Bubble, Neon, Vintage, Duotone, and More. Bonus Vector Icons & Elements!

A living style guide generator that will boost your efficiency, visual testing and CI, encourages to write in more of a modular style and quickly s...

A living style guide generator that will boost your efficiency, visual testing and CI, encourages to write in more of a modular style and quickly search through components.

CSS utility classes to enhance texts with advanced typographic features. The classes are design with the idea that the features should be as easy t...

CSS utility classes to enhance texts with advanced typographic features. The classes are design with the idea that the features should be as easy to apply as bold and italics, they should cascade predictably and fallback gracefully.

A compelling effect for texts made in pure SCSS. Its main idea is to create a diagonal glowing effect over a set of letters. It uses keyframes to a...

A compelling effect for texts made in pure SCSS. Its main idea is to create a diagonal glowing effect over a set of letters. It uses keyframes to animate letter by letter. The code is lightweight and can be used in web and mobile designs.

An extensive collection of design assets: From color palettes, icons, paper textures, engraving brushes, vectors, actions; to all kinds of template...

An extensive collection of design assets: From color palettes, icons, paper textures, engraving brushes, vectors, actions; to all kinds of templates and branding items. Only $19. Limited time offer, time is running out!

A CSS and JavaScript text effects that resemble jelly. It is a lightweight creation that also has a reflection. It can be implemented as a decorati...

A CSS and JavaScript text effects that resemble jelly. It is a lightweight creation that also has a reflection. It can be implemented as a decorative element in any website or mobile app. It was created by Mauricio Allende.

A beautiful logo that explodes when you hover over it, made in CSS and JavaScript. It can be used in digital presentations and other public events ...

A beautiful logo that explodes when you hover over it, made in CSS and JavaScript. It can be used in digital presentations and other public events as a decorative element that baffles your audience. It was created by Nicholas Cerminara.

A CSS code snippet with various web fonts by Google and different effects for each one of them. the effects include shadows, gradients and a sketch...

A CSS code snippet with various web fonts by Google and different effects for each one of them. the effects include shadows, gradients and a sketch texture. This snippet was created by Codepen's user Stephy.

An exclusive pack of 50 Script Fonts delivered in 10 different families, covering a wide variety of styles & weights. Only $15!

An exclusive pack of 50 Script Fonts delivered in 10 different families, covering a wide variety of styles & weights. Only $15!

A demonstration of multi-line text fading with CSS and repeating linear gradients. Also this effect is possible if you select the text.

A demonstration of multi-line text fading with CSS and repeating linear gradients. Also this effect is possible if you select the text.

Bennett Feely continues to surprising us this time showing us a pretty clever way to make a narrow middle text effect just with text transform and ...

Bennett Feely continues to surprising us this time showing us a pretty clever way to make a narrow middle text effect just with text transform and font size CSS properties.

Simple and original input text built using the css3 transform property.

Simple and original input text built using the css3 transform property.

459 Photorealistic Objects, Only $15! 4 Scene Creators in 1 (Top View) Includes Backgrounds & Textures, Premade Scenes, Smart Layers.

459 Photorealistic Objects, Only $15! 4 Scene Creators in 1 (Top View) Includes Backgrounds & Textures, Premade Scenes, Smart Layers.

3D text effect using CSS3 text-shadow made easier to maintain with @for directive in Sass.

3D text effect using CSS3 text-shadow made easier to maintain with @for directive in Sass.

Using text-shadow and keyframe animations to produce neon light effect. Javascript to enable it and hide the button.

Using text-shadow and keyframe animations to produce neon light effect. Javascript to enable it and hide the button.

This amazing text effect uploaded by Tim Teeling from codepen.io shows a 3d blue text with a little bit angled transforming.

This amazing text effect uploaded by Tim Teeling from codepen.io shows a 3d blue text with a little bit angled transforming.

75+ Fonts Typographic Toolbox, Only $19! OTF, TTF, WOFF & WOFF 2 Formats, OpenType Features, Multilanguage Support

75+ Fonts Typographic Toolbox, Only $19! OTF, TTF, WOFF & WOFF 2 Formats, OpenType Features, Multilanguage Support

An amazing effect brought to life with some HTML and CSS. It features a moving background image that can only be seen through a completely transpar...

An amazing effect brought to life with some HTML and CSS. It features a moving background image that can only be seen through a completely transparent set of letters, creating a fantastic illusion and bringing all the attention towards the text. This was created by JSFiddle user girlie_mac.

CSS3 mirroring effect achieved with the Transform module.

CSS3 mirroring effect achieved with the Transform module.

Nice effect for texts achieved with CSS

Nice effect for texts achieved with CSS

1000 Logo Templates Bundle, Only $14! Ai & EPS Vector Formats, 6 Trendy Design Styles, Tons of Variations. Extended Commercial License!

1000 Logo Templates Bundle, Only $14! Ai & EPS Vector Formats, 6 Trendy Design Styles, Tons of Variations. Extended Commercial License!

Color and fade effect applied to text with CSS.

Color and fade effect applied to text with CSS.

Text animation concept using Lettering.JS

Text animation concept using Lettering.JS

Pleasant and interesting effect that resembles an ice cream sandwich.

Pleasant and interesting effect that resembles an ice cream sandwich.

An updated pack of social media templates. Create cool posts and enhance your Facebook, Pinterest, Instagram and Twitter profiles. Only $14 for a l...

An updated pack of social media templates. Create cool posts and enhance your Facebook, Pinterest, Instagram and Twitter profiles. Only $14 for a limited time!

Effect of double stroke on a simple text using just CSS.

Effect of double stroke on a simple text using just CSS.

Text animation with glow created by Joe Dearman posted in CodePen

Text animation with glow created by Joe Dearman posted in CodePen

A mix of LESS for a simple text.

A mix of LESS for a simple text.

820+ Isolated Objects From 3 Different Mock-up & Scene Generators! Ultra High-Quality Assets In PSD format, Separated Shadow Layers For Every Objec...

820+ Isolated Objects From 3 Different Mock-up & Scene Generators! Ultra High-Quality Assets In PSD format, Separated Shadow Layers For Every Object, Pre-made Scenes & Background Textures Included. Get this bundle for just $19! (98% Off)

Text in 3d with shadow effect using SASS

Text in 3d with shadow effect using SASS

A stereoscopic 3D effect with CSS3 only. The author was just created playing around but then realized it actually works. Basically you just need on...

A stereoscopic 3D effect with CSS3 only. The author was just created playing around but then realized it actually works. Basically you just need one line of CSS. A text-shadow with a red and cyan offset and the trick is to use “em"s for the text-shadows. That way, if you change the font-size, the text-shadows change in the same proportion.

This is a 4 minute video tutorial in which the author explains how to add simple gradients to text using CSS3. This tutorial was created by Jeffrey...

This is a 4 minute video tutorial in which the author explains how to add simple gradients to text using CSS3. This tutorial was created by Jeffrey Way. It shows step by step how to create the gradient, and he also gives you the code, in case you just want to implement it quickly.

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $...

A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $19 for a limited-time

A simple and fun text opening sequence effect with blurry letters using CSS animations.

A simple and fun text opening sequence effect with blurry letters using CSS animations.

This JSFiddle project provides a small collection of text shadows applied to a set of attractive fonts, creating a compelling look. The shadows are...

This JSFiddle project provides a small collection of text shadows applied to a set of attractive fonts, creating a compelling look. The shadows are definitely not like the usual ones, including striped and rounded details. Keep something in mind, though: These shadows will only work with webkit browsers.

This CSS technique makes use of multiple shadows of different intensities to create this 3D effect that provides a smooth and clean appearance. Def...

This CSS technique makes use of multiple shadows of different intensities to create this 3D effect that provides a smooth and clean appearance. Definitely useful to tiles or pieces of texts that require extra attention from the reader.

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects fo...

2880+ Vector Ornamental Drop Cap Lettering Designs Including Celtic, Gothic, Illuminated Manuscript, Gravure, And Many More Styles! Foil Effects for Illustrator & Photoshop, As Well As Paper Textures & Mockups Included, Get This Bundle For Just $14! (95% Off)

This tip shows how to obtain inset shadows in our texts using CSS3's text-shadow property, making them look as if they were cut out from the backgr...

This tip shows how to obtain inset shadows in our texts using CSS3's text-shadow property, making them look as if they were cut out from the background.

This is one hell of a trippy animation we found at JSFiddle. A huge text reads "groovy" while an (fittingly, groovy) animation displays a line of b...

This is one hell of a trippy animation we found at JSFiddle. A huge text reads "groovy" while an (fittingly, groovy) animation displays a line of bright, saturated colors bleeding out of each letter, creating a very eye-catching effect that's sure to grab some attention.

This 3D text uses multiple shadow effects in order to carry that style. Rishabh built upon Andrew Lee's original design, adding a little bit o...

This 3D text uses multiple shadow effects in order to carry that style. Rishabh built upon Andrew Lee's original design, adding a little bit of rotation and making the text content-editable without having to modify the code, just click on the box and you are all set!

330+ Unique Printing Templates Bundle, Includes 200+ Multi Purpose Flyer Templates, Corporate Identity Kit, Business Cards, Magazine Templates, Let...

330+ Unique Printing Templates Bundle, Includes 200+ Multi Purpose Flyer Templates, Corporate Identity Kit, Business Cards, Magazine Templates, Letterheards, Brochures, CV/Resume Templates, INDD, PSD, Ai, EPS File Formats. Get this Bundle Now For Just $29!

This 3D text effect was made with 2D transforms in order to keep cross-browser compatibility. These transforms are applied to both the content and ...

This 3D text effect was made with 2D transforms in order to keep cross-browser compatibility. These transforms are applied to both the content and the title, with the latter receiving two shadow effects in order to give it its 3D look. Created by Duncan Midwinter.

This is a pretty fast retro shadow you can apply to any text. It actually is the combination of two shadows, one matching the background color, whi...

This is a pretty fast retro shadow you can apply to any text. It actually is the combination of two shadows, one matching the background color, while the other one carries a softer tone of the same color. By the way, the font you are watching in the example is called Sansita One, just letting you know.

This cool effect allows us to create an embossed text by just applying shadow to our design. It combines two different shadows, one white, the othe...

This cool effect allows us to create an embossed text by just applying shadow to our design. It combines two different shadows, one white, the other black. It is recommended to match both text and background colors in order to achieve the correct result.

1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use ...

1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use License.

A nice fluffy cloud text effect created only with CSS3's text-shadow property. The text features a transparent color with four shadows that come to...

A nice fluffy cloud text effect created only with CSS3's text-shadow property. The text features a transparent color with four shadows that come together providing different blur radius and opacity. Keep in mind this effect will not be displayed in IE8 or lower.

This pack contains many colorful shadow effects that will surely be seen by your users. Double elements, multicolor shadows, shaky and many more ar...

This pack contains many colorful shadow effects that will surely be seen by your users. Double elements, multicolor shadows, shaky and many more are included in this project. Count it to Ade Arwans from CodePen for the posting of these elements.

A wonderful interactive shadow effect that can spread to huge proportions, taking the whole screen. The mouse works the magic: Left and right movem...

A wonderful interactive shadow effect that can spread to huge proportions, taking the whole screen. The mouse works the magic: Left and right movements control the shadow size, which can go all the way to the frame of the page. Up and down movement manages the vertical position of the shadow.

131 unique high-resolution mockup, based on real images and also including smart objects feature to get photo-realistic effects. Normally this bund...

131 unique high-resolution mockup, based on real images and also including smart objects feature to get photo-realistic effects. Normally this bundle could be priced up to $380, get it only $14! Limited-time promo.

Matt Sullivan from CodePen provides us with this shadow effect that gives another dimension to the text, The shadow looks somehow twisted and skewe...

Matt Sullivan from CodePen provides us with this shadow effect that gives another dimension to the text, The shadow looks somehow twisted and skewed, which hints for a particular "light source" position.

Here we have a colorful and cartoonish text with a very (and I mean very) subtle shadow behind it created in pure CSS. Created by CodePen user ...

Here we have a colorful and cartoonish text with a very (and I mean very) subtle shadow behind it created in pure CSS. Created by CodePen user Os Vampireos.

A stripped-down shadow effect made in CSS. It helps bring out the text and give it more importance while also making it fancier. A Jeremy Shim...

A stripped-down shadow effect made in CSS. It helps bring out the text and give it more importance while also making it fancier. A Jeremy Shimko design hosted at CodePen.

High-resolution video time-lapses, featuring city and natural landscapes from all over the world. 40+ assets for your next project, from video prod...

High-resolution video time-lapses, featuring city and natural landscapes from all over the world. 40+ assets for your next project, from video production to web design and presentations! Only $19!

This useful CodePen project provides us with four types of impressive shadows for text:- Elegant: Subtle, yet compelling and stylish.- Deep: Gives ...

This useful CodePen project provides us with four types of impressive shadows for text:- Elegant: Subtle, yet compelling and stylish.- Deep: Gives a 3D effect to the text, totally bringing it out of the background.- Inset: Doing the opposite as the deep effect, making the text look as if it was engraved into the background.- Retro: A very simple approach that applies a thin shadow

This text features an interesting 3D effect and a very subtle shadow to separate it from the nice background we can find at the CodePen page. Every...

This text features an interesting 3D effect and a very subtle shadow to separate it from the nice background we can find at the CodePen page. Everything is done with some fairly simple CSS by Tommy McDonald.

This inner shadow effects gives a good deal of dimensionality and presence to the text. Definitely useful for titles and situations where what's wr...

This inner shadow effects gives a good deal of dimensionality and presence to the text. Definitely useful for titles and situations where what's written requires special attention. It is created and modified with CSS3 and Sass. All credit goes to Andrew Boyd.

800+ Seamless Patterns, Only $12: PAT File Format For Adobe Photoshop, Unlimited Commercial Use

800+ Seamless Patterns, Only $12: PAT File Format For Adobe Photoshop, Unlimited Commercial Use

A project that provides a way to apply awesome effects to a piece of text. When hovering on the sentence, it moves forward and separates from the b...

A project that provides a way to apply awesome effects to a piece of text. When hovering on the sentence, it moves forward and separates from the background, with a shadow accentuating the illusion. Also, the letters gain a 3D appearance, which gives them more presence.

A super original set of seven different hover effects, all applied to regular text (which could be displayed inside your usual blog entry, for exam...

A super original set of seven different hover effects, all applied to regular text (which could be displayed inside your usual blog entry, for example). They include blurs, cloning, underlines and much more, all styled with the power of CSS. Uploaded to CodePen by Mateusz Kocz.

A visually attractive experiment that makes full use of CSS to display a piece of text and apply a blurring effect plus an animated line going belo...

A visually attractive experiment that makes full use of CSS to display a piece of text and apply a blurring effect plus an animated line going below it at the same time. Bring the mouse back to view the text again in normal circumstances. Uploaded by CodePen user Monkey Raptor.

2000+ Ultra HD Food Stock Photos, Only $14! Resolution 6000x4000, 19 Content Categories, Commercial License.

2000+ Ultra HD Food Stock Photos, Only $14! Resolution 6000x4000, 19 Content Categories, Commercial License.