Question 187829 in CSS Question posted in
Some basic documentation can be found here.

Css – How to create a large text-shadow (spreading 120px)

I need to create a rather large text-shadow, with spread of around 120px. While the usual approach to stacking shadows together like text-shadow: 0px 0px 10px #fff, 0px 0px 10px; does work when working with smaller shadows, using a larger value instead of 10px creates a hard to solve problem.

The larger the spread value is, the less visible the shadow is, which means that for larger shadows, you need to stack not two, but more like 30 shadows together. Using that number of shadows usually breaks the browser and the page either does not load or does not display correctly.

Displaying a large shadow is important for the page I am working on. Does any workaround exist? I really want to avoid using images for this and would like to stick to using html elements with styles applied to them.

Tags:

2

Answers


  1. 0

    Due to the lack of an example, I had to "figure out" what you wanted. If I understand correctly, you want to display the "shadow" of the text in the background, meaning you want to see the text faintly in the background. Using a pseudo-element, I read the text entered in the "data-text" attribute, set it to have a transparent text color, increased the font size, and added a small shadow to it.

    Example # 1

    .text {
    margin-top: 100px;
    position: relative;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
.text::after {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(0, -50%);
    z-index: -1;
    font-size: 70px;
    color: transparent;
    text-shadow: 0px 0px 10px #eee, 0px 0px 10px #eee;
}
    <div class="text" data-text="Your text here">
    Your text here
</div>

    Example # 2

    Actually, if you make the text color lighter than the original, you don’t necessarily need to use the text-shadow at all, although it is true that text-shadow offers more possibilities.

    .text {
    margin-top: 100px;
    position: relative;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
.text::after {
    content: attr(data-text);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(0, -50%);
    z-index: -1;
    font-size: 70px;
    color: #eee;
}
    <div class="text" data-text="Your text here">
    Your text here
</div>

    Example # 3

    Or, if you really want to create a shadow effect, for text-shadow (and/or blur filter) values higher than 10-20px, it would result in a blob, which is a perfectly valid outcome… If you gradually increase the shadow size, you might achieve a decent result. Nevertheless, I’ll leave the example here in case someone needs it.

    .text {
    margin-top: 100px;
    position: relative;
    text-align: center;
    font-size: 20px;
    text-shadow:
        0 0 30px #000,
        0 0 40px #000,
        0 0 50px #000,
        0 0 60px #000;
}
    <div class="text">
    Your text here
</div>
    Login or Signup to reply.
  2. 0

    You can fake the shadow with a copy of the text.

    div {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
}

h1 {
color: black;
z-index: 0;
}

h1:before {
content: attr(data-txt);
position: absolute;
color: rgba(120, 120, 120, .25);
left: 0;
top: 80px;
z-index: -1;
font-size: 120px;
text-shadow: 0px 0px 5px rgba(120, 120, 120, 1);
}
    <div>
  <h1 data-txt="TEXT">TEXT</h1>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search