How to make bottom shadow in text in css.
I have a text and it looks like in pic. I want to make like that in css. I tired textshadow and box shadow. but i can't achieve that design. Can someone help me with this.
14 Replies
Like this?
I made that in Figma with these settings on the text:
Export to SVG and you are done
The important thing is the 0 blur and 100% black color.
Thanks. But the text will change. I need that black stroke and drop shadow in css style
<div style={{boxShadow: "0px 0px 285px 150px rgba(119,45,239,0.6)",}}>Javascript</div>
You can use this website to easily try stuff:
https://html-css-js.com/css/generator/text-shadow/
Online Text Shadow CSS Generator
Pick a predefined style from the gallery or generate a text shadow with your preferences. Set up the desired attributes to get the CSS code.
I used this:
#demotext {
text-shadow: 0px 2px 0px #000000;
-webkit-text-stroke: 2px black;
color: #FFFFFF;
background: #FFFB03;
}
Then you get this:
I see you used box-shadow, but you need text-shadow if you want to apply it to text.
Thanks a lot for website and solutions. I will check this out.
Just to throw an alternative out there you could also use a drop-shadow filter.
filter: drop-shadow(0 3px black);
This will give a very similar effect to the traditional text-shadow but it does have subtle visual differences.
In my capture the top text uses the drop-shadow and in the second one it uses the text-shadow, both with exactly the same values.
Sure.. thanks
im not really great at it, and it took a lot of time to figure it out for myself, but with svg filters you can do even more.
https://codepen.io/MarkBoots/pen/WNVpBMa?editors=1000
if you are interested in this, i'd suggest looking up Ana Tudor. She makes wonderful effects with svg filters
Thanks...