CSS and SVG realize text gradient, stroke and projection

In some web activity pages, you can often see specially processed title text, such as this

Ignore the special font for the time being. You can find from the layer style of the design draft. There are 3 text effects, namely gradient, stroke, and projection.

As a pursuing front-end, of course you won’t use pictures directly~ Here are two ways to achieve it with CSS and SVG, let’s take a look

Reminder: The article has more details, you can skip to the bottom to view the online demo if you are not interested

One, CSS text gradient

Let's first look at the implementation in CSS.

There is no direct property to set the text gradient in CSS, usually the text can only be a solid color. However, the background-clip , it looks like the text has a gradient

<p class="text">为你定制 发现精彩</p>

.text{
  background-image: linear-gradient(#FFCF02, #FF7352);
  background-clip: text;
    -webkit-background-clip: text;
}

But this has no effect, the text is still the default color

The reason is actually very simple. Because it is a cropped background, the final display is actually the background color. The colored text is overlaid on the background, so here you need to set the text color to be transparent. color and -webkit-text-fill-color can be used.

.text{
  background-image: linear-gradient(#FFCF02, #FF7352);
  background-clip: text;
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /*需要文字透明*/
}

So you can see the text gradient effect

Two, SVG text gradient

Let's take a look at the text gradient in SVG.

SVG naturally supports text gradients, and text can be treated as a normal vector path. The structure is as follows

<svg>
    <text>为你定制 发现精彩</text>
</svg>

Fill it directly with fill , but it should be noted that the filling here is a bit more troublesome. The gradient cannot be like CSS. You must use the special gradient label <linearGradient> . If you are interested, you can check linearGradient-SVG | MDN (mozilla.org) , Need to be defined in <defs></defs>

<svg>
  <defs>
    <linearGradient id="gradient">
      <stop offset="0%"  stop-color="#FFCF02"/>
      <stop offset="100%"  stop-color="#FF7352"/>
    </linearGradient>
  </defs>
    <text class="text">为你定制 发现精彩</text>
</svg>

<linearGradient> in <stop> label for the color gradient defines a gradient, offset and stop-color define nodes and color gradients, and then by fill property gradient fill (specified id)

.text{
  fill: url(#gradient);
}

The effect is as follows (not that there is a problem with the image loading)

There are two problems

1. The text is not centered both horizontally and vertically
2. The gradient direction is horizontal to the right

First look at the first question. The adaptive processing of text in SVG is still very weak. For example, in the common automatic line wrapping in CSS, SVG can only manually wrap at a specified position. Here you need to use two attributes text-anchor and dominant-baseline , which are marked with text anchor point alignment and text baseline alignment. Simply put, it is the horizontal and vertical alignment.

.text{
  text-anchor: middle;
  dominant-baseline: middle;
  fill: url(#gradient);
}

At the same time <text> also need to set x , y position, the percentage here can be compared with the background position percentage in CSS

<text class="text" x="50%" y="50%">为你定制 发现精彩</text>

This will center the display

Regarding the direction of the gradient, SVG is determined by the two sets of coordinates x1 , y1 , x2 , y2 Given a rectangle, the upper left corner is [0，0] , and the lower right corner is [1, 1] , so any angle can be expressed

For example, now need to vertically downward direction, then may be <linearGradient> provided x1="0" y1="0" x2="0" y2="1" , as follows

<svg>
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%"  stop-color="#FFCF02"/>
      <stop offset="100%"  stop-color="#FF7352"/>
    </linearGradient>
  </defs>
    <text class="text">为你定制 发现精彩</text>
</svg>

The effect is as follows

Three, CSS text stroke

-webkit-text-stroke specially used for text stroke in CSS, which can control the width and color of the stroke, such as

.text{
  -webkit-text-stroke: 2px #333;
}

The effect is as follows

There is indeed a stroke, but the text seems to be thinner. If it is not obvious, you can set it larger

It can be seen from this that -webkit-text-stroke is actually centered stroke, and it is overlaid on the text, and the stroke method cannot be changed. In fact, many design tools can choose the stroke method, such as figma

So, how to achieve the outer stroke effect?

it is also fine! Use two layers of text, one layer of text stroke, and one layer of text gradient. In order to save labels, you can use pseudo-elements to generate

<p class="text" data-title="为你定制 发现精彩">为你定制 发现精彩</p>

::before set the gradient, located at the top, the original text set the stroke, located at the bottom, pay attention to remove ::before of -webkit-text-stroke

.text::before{
    content: attr(data-title);
    position: absolute;
    background-image: linear-gradient(#FFCF02, #FF7352);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 0;
}
.text{
    -webkit-text-stroke: 6px #333;
}

The superposition is as follows

Changing different strokes will not cause the text to become "thinner"

Four, SVG text stroke

SVG can also achieve the stroke effect, which is similar to CSS. It should be said that CSS draws on SVG, through stroke and stroke-width to control the stroke color and size, such as

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
}

Can get this effect

Like CSS performance, it is centered and cannot be changed.

The difference is that SVG control is more flexible. defaults to fill first and then stroke , so it looks like the stroke is on top of the fill. However, we can change this rule and set the stroke first, then fill. , Then the filled color will cover the stroke. To change this rule in SVG, you can set paint-order . For this property, those who are interested can visit this article by : 1614be6b85205b CSS paint-order Wish you a happy new

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
}

This achieves the outer stroke effect, is it much more convenient than CSS?

In addition, SVG can also set the shape of the corner of the stroked path. For example, the corner setting in figma is as follows

The corresponding attribute in SVG is called stroke-linejoin , here is rounded corners, you can do the following settings

.text{
  /*其他*/
  stroke-width: 4px;
  stroke: #333;
  paint-order: stroke; /*先描边*/
  stroke-linejoin: round; /*路径转角为圆角*/
}

The effects of various attributes are as follows

Five, CSS text projection

Continue to add effects. CSS can add text projection text-shadow

.text{
    -webkit-text-stroke: 6px #333;
      text-shadow: 0 4px 0 #333;
}

Turned out to be like this

The reason is actually related to the text gradient. The gradient is actually the background color and the text is transparent, so I add a shadow to the text, and the shadow is overlaid on the background. In addition to using text-shadow , it can also be achieved by drop-shadow filter

.text{
    -webkit-text-stroke: 6px #333;
      filter: drop-shadow(0 4px 0 #333);
}

This is perfect

Six, SVG text projection

SVG is more flexible. For example, the drop-shadow filter used above is actually borrowed from the <feDropShadow> filter in SVG, so SVG can also be implemented in this way

<svg>
    <defs>
        <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stop-color="#FFCF02"/>
          <stop offset="100%"  stop-color="#FF7352"/>
        </linearGradient>
          <filter id="shadow">
            <feDropShadow dx="0" dy="4" stdDeviation="0" flood-color="#333"/>
        </filter>
    </defs>
    <text x="50%" y="50%" class="text">为你定制 发现精彩</text>
</svg>

Here the dx , dy , stdDeviation , flood-color and drop-shadow(dx,dy,stdDeviation,flood-color) are one-to-one correspondence, so I won’t explain more, and then apply filters in the text

.text{
  /*其他*/
  filter:url(#shadow);
}

This can also achieve text projection

In fact, SVG doesn’t have to be so troublesome. The text-shadow above can’t be used is because the text gradient implemented by CSS is a background, which is a fake text gradient, but SVG is a real gradient fill, so yes, it’s possible here. Directly use text-shadow in CSS to achieve, SVG and CSS now many attributes and styles are interoperable, as follows

.text{
    /*其他*/
      fill: url(#gradient);
      text-shadow: 0 4px 0 #333;
}

Implementation is more concise

Seven, special font processing

Usually the event title will use some special fonts, English fonts are fine, the whole introduction can be, but Chinese is not good, most Chinese fonts are very large, may reach tens of MB or hundreds of MB. In fact, we only need to use the font that appears. If the special font of the part of the text that appears is extracted separately, the entire font file will be greatly reduced. This process is called font subsetting.

So how to deal with it?

Here is a recommended tool Fontmin-Font Solution 1614be6b8524c7. For the principle of font subsetting, you can refer to this article: Performance Optimization Wizard: Chinese Font Practice-Nuggets

After downloading the client, import the font file .ttf , and then enter the text you need, as follows

Click Generate, you can get the following files

Among them, the first -embed is the base64 converted file, which can be imported directly

@font-face {
    font-family: "HYLiLiangHeiJ Regular";
    src: url("HYLiLiangHeiJ Regular.eot"); /* IE9 */
    src: url("HYLiLiangHeiJ Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMr6khfgAAACsAAAAYGNtYXB/inIFAAABDAAAAYJnbHlmmahvSQAAApAAAARkaGVhZA6mvEEAAAb0AAAANmhoZWEHiwK6AAAHLAAAACRobXR4BJMAmgAAB1AAAAAUbG9jYQPgBSoAAAdkAAAAFG1heHAAEwBIAAAHeAAAACBuYW1lb/SphAAAB5gAAALhcG9zdOu6TDAAAAp8AAAAdAAEA+gBkAAFAAgAZABkAAABRwBkAGQAAAOVAGQA+gAAAAIGAAQBAQEBAaAAAr8QAAAAAAAAFgAAAABITllJAEBOOny+AyD/OAAAA5UBRwAEAAAAAAAAAcAChQAAACAAAQAAAAMAAAADAAAAHAABAAAAAAB8AAMAAQAAABwABABgAAAAFAAQAAMABE46T2BSNlPRW5pfaXOwfL7/////AABOOk9gUjZT0VuaX2lzsHy+/////7HHsKKtzawzpGugnYxXg0oAAQABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAz/14DsALzABUAGQAAEyczFzM3MwchESEnIREjAyE1MxMjNQUzEyNkFrgZCyDiIAGk/hcRASDugf7NdVzSAbG3LLwCX4yMlJT9ALMBpv2mtAGmp+z+6wAAAAAEACj/VQPJAu4ADAAWACIAKAAAAQMzETMRIycHIzUzEwERBzU3NTMRBxEBByERIzUjByM1MzcBMxUjAzMCGiw0w/EGEbQfKP7fJyzZEwEkCwGNu/0bsx8kAjEbtyemAZL+egHk/WexmscBXf3DAesR4xzA/rYJ/boDmCv+52tuvIv9R8gCJQAAAwAk/1QDtwLzACUAKwAvAAATMwczNTMVMxUjFTMVIxUzESMRIxEjESMRIxEzNSM1MzUjByM1MwEhJzMRMwERMxFQlAgUqa+vw8O4mx2pHpu5yMgqCpgWA33+1AiAtP6uigLnLzs7jlWPIv5ZARj+vwFB/vEBniKPVUWQ/OOdAvX9JQK9/UMAAAMAJP9dA8QC8QAgACQAKQAAAQczNzMHMyczFzMVIQchFQcXMxUjJwchNQcjNTMTIzU3ATcnBzcHMxc3ARYmLSveK5oY2hpT/gAMAfy2O4jgZk7+7CPSNI63LQFaI3wtUQiKVFMC73+BgXh4pSOxvyqxUlJqasABroqa/R8iZIbzFzxTAAIALP9bA8AC7AAXACMAAAUnByM1MzczBxczESE1IRUhFSEVIRUhFQE1ISchFyEVIzUhFQFSPRDZJivbIlcS/pUDg/7SARn+5wE3/G0BSAQBFwUBMuj+OKFUWL39tVcBJqCgP5pNqgKE0jc31jczAAAIACv/XAPRAvMAEAAdACMAKQAtADEANQA5AAAXEQMjEzM1IzUzNTMVMxUjERMzNzMDIzUHITUhNzMBAyE1MzcTAyE1MzcDEyMDJzczByUzFyM3Mxcj5hqhHp2vr8KxscRdKthh/g/90wF2B+IBQkz+7VouyFj+/WIkoR2kGQwgpyP99ZsZnpicFJikAVf+rQFgEJQiIpT+jAMpav7upi+LFP22/re2kwEj/uqwZv70/p0BY863t7e+vq8AAAIAKP9bA7IC4wAYACwAAAERMxUzNTMVITUHIzUzNyMRIREjESMRNxEDIxUzFSE1MzUjNTM1IzUhFSMVMwLWJCqO/rJBu09FkQI5pPEe4Cs4/s4/NDQ5ATA8KwIo/nGaMNRhYa1pAnL9kAHP/kstAW7+0fGnp/GcrKKirAAJACP/TwPBAvIACQAhAC0AMQA1ADkAPQBBAEUAAAURIREhJzM1IxUDNTM1IzUzNSM1MzUzFTMVIxUzFSMVMxUBESM1MzUzFTMVIxEDEQcRAScRMyc3MwclMxcjARUzNQczNSMBjQIk/vAIY8G0s5ycqanFvr6pqcL8yWNjkWFhm1MBSFFRVglYC/6uVg1YAg3BwcHBqAH5/gp2F5ACD24ZZxZtGhptFmcZbv3xAgaQ/v6Q/foB9P4ZFgH9/gMWAeey0dHS0f7lHx+bHAABAAAAAQAAARwkRF8PPPUAAwPoAAAAAM58+bMAAAAA3R9/YwAj/08D0QLzAAAADAABAAAAAAAAAAEAAAOV/rkAAAPoACMAFwPRAAEAAAAAAAAAAAAAAAAAAAABA+gAAAAzACgAJAAkACwAKwAoACMAAAAAAC4AcgC2APgBMAGOAcwCMgABAAAACQBGAAkAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAAEADGAAEAAAAAAAAAPAAAAAEAAAAAAAEAEwA8AAEAAAAAAAIABwBPAAEAAAAAAAMAIQBWAAEAAAAAAAQAGwB3AAEAAAAAAAUADACSAAEAAAAAAAYADQCeAAEAAAAAAAcAEgCrAAMAAQQJAAAAeAC9AAMAAQQJAAEAGAE1AAMAAQQJAAIADgFNAAMAAQQJAAMAQgFbAAMAAQQJAAQAKAGdAAMAAQQJAAUAGAHFAAMAAQQJAAYAGgHdAAMAAQQJAAcAJAH3KGMpIENvcHlyaWdodCBCZWlqaW5nIEhBTllJIEtFWUlOIEluZm9ybWF0aW9uIFRlY2hub2xvZ3kgQ28ubElOw6pSwpvCkcOPwp7DkXvCgFJlZ3VsYXJIYW55aSBIWUxpTGlhbmdIZWlKIFJlZ3VsYXIgdjUuMDBsSU7DqlLCm8KRw4/CnsORe8KAIFJlZ3VsYXJWZXJzaW9uIDUuMDBIWUxpTGlhbmdIZWlKVHJhZGVtYXJrIG9mIEhBTllJACgAYwApACAAQwBvAHAAeQByAGkAZwBoAHQAIABCAGUAaQBqAGkAbgBnACAASABBAE4AWQBJACAASwBFAFkASQBOACAASQBuAGYAbwByAG0AYQB0AGkAbwBuACAAVABlAGMAaABuAG8AbABvAGcAeQAgAEMAbwAuAGwASQBOAOoAUgCbAJEAzwCeANEAewCAAFIAZQBnAHUAbABhAHIASABhAG4AeQBpACAASABZAEwAaQBMAGkAYQBuAGcASABlAGkASgAgAFIAZQBnAHUAbABhAHIAIAB2ADUALgAwADAAbABJAE4A6gBSAJsAkQDPAJ4A0QB7AIAAIABSAGUAZwB1AGwAYQByAFYAZQByAHMAaQBvAG4AIAA1AC4AMAAwAEgAWQBMAGkATABpAGEAbgBnAEgAZQBpAEoAVAByAGEAZABlAG0AYQByAGsAIABvAGYAIABIAEEATgBZAEkAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACQAJAAABAgEDAQQBBQEGAQcBCAEJB3VuaTRFM0EHdW5pNEY2MAd1bmk1MjM2B3VuaTUzRDEHdW5pNUI5QQd1bmk1RjY5B3VuaTczQjAHdW5pN0NCRQ==) format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
    url("HYLiLiangHeiJ Regular.svg#HYLiLiangHeiJ Regular") format("svg"); /* iOS 4.1- */
    font-style: normal;
    font-weight: normal;
}
.text{
  /*其他样式*/
  font-family: "HYLiLiangHeiJ Regular";
}

This achieves almost the same effect as the design draft

In fact, if you look at it from the beginning, you should be able to realize one by yourself. You can master the principle and deepen your impression, and become your own. But maybe not every classmate has time or can calm down to study every case, so here is the online demo, and you want to see the result directly for direct access, as follows

CSS implementation can access text-css (codepen.io)

SVG implementation can access text-svg (codepen.io)

Eight, summary and explanation

The above introduced two different ways of CSS and SVG to achieve special effects of text. From the effect point of view, it is obvious that SVG is better, such as smoother strokes and no need for multiple nesting, but CSS also has advantages, such as gradients. Color and projection are simpler, to summarize

1. CSS text gradient is essentially background cropping, and the text color needs to be set to transparent
2. SVG text naturally supports gradient filling, which requires the help of linearGradient tags
3. SVG text centering is a bit more troublesome, you need to use text-anchor and dominant-baseline
4. Both CSS and SVG strokes are centered and cannot be changed
5. CSS outer stroke can be achieved through multi-layer structure overlay
6. SVG can draw the fill on the stroke through paint-order
7. The CSS text shadow will penetrate when the text is transparent, you can use drop-shadow to simulate the projection
8. FeDropShadow in SVG is similar to drop-shadow in CSS
9. SVG can directly use text-shadow in CSS to achieve text projection
10. Font subsetting fontmin

CSS and SVG have their own advantages and influence each other. Many CSS styles can also be used in SVG, and many SVG attributes have also begun to be introduced in CSS. In normal development, you can fully combine the advantages of the two. Finally, if you think it’s pretty good, if it’s helpful to you, please like, bookmark, and forward ❤❤❤