Html Question posted in
Some basic documentation can be found here.

Html – How to get this stroke effect for text in css

I have a text and it looks like in pic. I want to make like that. I tired textshadow and box shadow. but i can’t achieve that design. Can someone help me with this.

Code i tried:

<div style={{boxShadow: "0px 0px 285px 150px rgba(119,45,239,0.6)",}}>Javascript</div>

Required Output:
enter image description here

Tags:

3

Answers


  1. 0 
    body {
  background:green;
}

.text {
     text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
  font-size:140px;
  color:white;
  position:relative;
  display:inline-block;
}

.text:before {
  position:absolute;
  content:"Javascript";
  font-size:140px;
  top:4px;
  left:3px;
  color:black;
  z-index:-1;
}
 
    <div class="text" >Javascript</div>

    You can give this type of effect with text-shadow property and before Psuedo element

    Login or Signup to reply.
  2. 0

    It seems as if there are multiple text elements rendered on top of each other, not just a single element (look at the upper left corner of the character "v" for example to see what I mean).
    In regards to the outline, it might be easier to achieve the desired effect by using SVG instead of HTML, because SVG allows to define the position/alignment of the stroke (inner/center/outer) via paint-order.

    Below is a quick and dirty version to get you started.

    body {
  font-family: sans-serif;
  background: hsl(120deg, 40%, 50%);
}
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 100">
  <style>
    .font {
      font-size: 3rem;
      font-weight: 700;
      text-anchor: start;
      paint-order: stroke fill;
      stroke-width: 4px;
    }
  
    .light {
      fill: hsl(0deg, 0%, 100%);
      stroke: hsl(0deg, 0%, 0%);
    }
  
    .dark {
      fill: hsl(0deg, 0%, 0%);
      stroke: hsl(0deg, 0%, 0%);
    }
  </style>
  <text x="4px" y="2.65rem" class="font dark">Javascript</text>
  <text x="4px" y="2.5rem" class="font light">Javascript</text>
</svg>
    Login or Signup to reply.
  3. 0

    If we look carefully at the characters, for example the a, we can see that there seem to be two things going on.

    The first is a text stroke, which gives a narrow black border around the top.

    The second looks like another copy of the character, offset slightly downwards, in black.

    This snippet gives the characters a text-stroke and also a text-shadow. The shadow is offset in the y direction and has no blur so it is solid black.

    You will need to play around with the sizes to get exactly the effect you want with whatever font and font size you are needing.

    <style>
  div {
    font-weight: bold;
    font-family: sans-serif;
    font-size: 120px;
    color: white;
    background: green;
    -webkit-text-stroke: 5px black;
    text-stroke: 5px black;
    text-shadow: 0px 10px 0px black;
    padding: 10px;
  }
</style>
<div style="">Javascript</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search