Before we begin:

  • You can apply these custom CSS snippets for the Text Design Element. Click here to check more details about this ShortPoint Design Element.
  • The Text Design Element is available since the ShortPoint SPFx version 6.9.35.x. Click here to check and download the latest available version of ShortPoint.

How to add a snippet

After you've chosen the snippet you like from our Snippets Gallery paragraph, do the steps below.


Step 1. Copy and paste the HTML code

Copy the HTML code of the chosen snippet. Click the code view option in the Content tab of the Text Design Element, and paste your copied HTML code:



Note: don't forget to change the text content to your own.

Step 2. Copy and paste the Custom CSS code


Copy the Custom CSS code of the chosen snippet. Switch to the Custom CSS tab of the Text Design Element, and paste your copied CSS code to the Custom CSS field:



Then, click Update and save the page.


Snippets Gallery

Rainbow Shadow

With this snippet you can define long shadows with different colors and spreads.


Final Result:



HTML Code:

<span style="font-family: Fredoka One;">
    <span class="shortpoint-text-font" data-font-family="Fredoka One" data-font-source="google">LOREM IPSUM</span>
</span>


Custom CSS Code:


font-weight: 600;
font-family: 'Fredoka One', sans-serif;
text-align: center;
text-transform: uppercase;
display: block;
color: #FFFFD9;
font-size:60px;
text-shadow: #ff6239 1px 1px, #ff6339 2px 2px, #ff643a 3px 3px, #ff663a 4px 4px, #ff673b 5px 5px, #ff683c 6px 6px, #ff693c 7px 7px, #ff6a3d 8px 8px, #ff6b3d 9px 9px, #ff6c3e 10px 10px, #ff6e3f 11px 11px, #ff6f3f 12px 12px, #ff7040 13px 13px, #ff7140 14px 14px, #ff7241 15px 15px, #ff7342 16px 16px, #ff7442 17px 17px, #ff7643 18px 18px, #ff7743 19px 19px, #ff7844 20px 20px, #ff7945 21px 21px, #ff7a45 22px 22px, #ff7b46 23px 23px, #ff7c46 24px 24px, #ff7e47 25px 25px, #ff7f48 26px 26px, #ff8048 27px 27px, #ff8149 28px 28px, #ff8249 29px 29px, #ff834a 30px 30px, #ff844b 31px 31px, #ff864b 32px 32px, #ff874c 33px 33px, #ff884c 34px 34px, #ff894d 35px 35px, #ff8a4e 36px 36px, #ff8b4e 37px 37px, #ff8c4f 38px 38px, #ff8e4f 39px 39px, #ff8f50 40px 40px, #ff9051 41px 41px, #ff9151 42px 42px, #ff9252 43px 43px, #ff9352 44px 44px, #ff9453 45px 45px, #ff9654 46px 46px, #ff9754 47px 47px, #ff9855 48px 48px, #ff9955 49px 49px, #ff9a56 50px 50px, #ff9b57 51px 51px, #ff9c57 52px 52px, #ff9e58 53px 53px, #ff9f58 54px 54px, #ffa059 55px 55px, #ffa15a 56px 56px, #ffa25a 57px 57px, #ffa35b 58px 58px, #ffa45b 59px 59px, #ffa65c 60px 60px, #ffa75d 61px 61px, #ffa85d 62px 62px, #ffa95e 63px 63px, #ffaa5e 64px 64px, #ffab5f 65px 65px, #ffac60 66px 66px, #ffad60 67px 67px, #ffaf61 68px 68px, #ffb061 69px 69px, #ffb162 70px 70px, #ffb263 71px 71px, #ffb363 72px 72px, #ffb464 73px 73px, #ffb564 74px 74px, #ffb765 75px 75px, #ffb866 76px 76px, #ffb966 77px 77px, #ffba67 78px 78px, #ffbb67 79px 79px, #ffbc68 80px 80px, #ffbd69 81px 81px, #ffbf69 82px 82px, #ffc06a 83px 83px, #ffc16a 84px 84px, #ffc26b 85px 85px, #ffc36c 86px 86px, #ffc46c 87px 87px, #ffc56d 88px 88px, #ffc76d 89px 89px, #ffc86e 90px 90px, #ffc96f 91px 91px, #ffca6f 92px 92px, #ffcb70 93px 93px, #ffcc70 94px 94px, #ffcd71 95px 95px, #ffcf72 96px 96px, #ffd072 97px 97px, #ffd173 98px 98px, #ffd273 99px 99px, #ffd374 100px 100px, #ffd475 101px 101px, #ffd575 102px 102px, #ffd776 103px 103px, #ffd876 104px 104px, #ffd977 105px 105px, #ffda78 106px 106px, #ffdb78 107px 107px, #ffdc79 108px 108px, #ffdd79 109px 109px, #ffdf7a 110px 110px, #ffe07b 111px 111px, #ffe17b 112px 112px, #ffe27c 113px 113px, #ffe37c 114px 114px, #ffe47d 115px 115px, #ffe57e 116px 116px, #ffe77e 117px 117px, #ffe87f 118px 118px, #ffe97f 119px 119px, #ffea80 120px 120px, #FF6138 0px 0px;
background: #FFEA80;
padding-bottom:150px;
padding-top:20px;

Text mask background

Use the background clip feature to make stunning text style with this snippet.


Final Result:



HTML Code:


<div>TEXT BACKGROUND<br>STYLE</div>


Custom CSS Code:

div {
  text-align: center;
  padding: 10px;
  font-weight: 800;
  color: transparent;
  font-size: 120px;
  background: url("https://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat;
  background-position: 40% 50%;
  -webkit-background-clip: text;
  position: relative;
  text-align: center;
  line-height: 90px;
  letter-spacing: -8px;
}
Note: you can replace the background URL with the image you want to get a distinctive look.

Multicolored Text Fill


Make your text vibrant and achieve a bold look with this snippet.


Final Result:


 

HTML Code:

<p>Spice up your type with CSS 
       <span> Multicolored text fill </span>
</p>


Custom CSS Code:


background-color: #090d00;
text-align: center;
color: rgba(255,255,255,.25);

p {
	text-transform: uppercase;
	letter-spacing: .5em;
	display: inline-block;
	padding: 1.5em 0em;
  
  span {

  	font: 700 4em/1 "Oswald", sans-serif;
  	letter-spacing: 0;
  	padding: .25em 0 .325em;
	display: block;
	margin: 0 auto;
  	text-shadow: 0 0 80px rgba(255,255,255,.5);
	background: url(http://f.cl.ly/items/010q3E1u3p2Q0j1L1S1o/animated_text_fill.png) repeat-y;
	 -webkit-background-clip: text;
	  background-clip: text;
	  -webkit-text-fill-color: transparent;
	  -webkit-animation: aitf 80s linear infinite;
	  -webkit-transform: translate3d(0,0,0);

  }
}

3D Text Effect


A black-and-white example of a 3D text with sha


Final Result:


 

HTML Code:

<div style="text-align: center;">
      <span style="font-size: 96px; color: rgb(250, 250, 250);">Lorem Ipsum</span>
</div>


Custom CSS Code:


 background-color: #c4c4c4;
 padding:50px;

span{ 
  text-transform: uppercase;
    font-family: verdana;
    font-weight: 700;
    color: #f5f5f5;
    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4) !important;
}

Related articles: