I would like to create my title image out of pure CSS3, but there is one feature that I'm not quite sure I can even do. Plus, the features that I know are possible don't seem to mix well. I don't know CSS very well, at least anything past the basics. I was hoping for some help.

Gradient Text - i did this, and it works by itself.
Drop Shadow - when combined, overrides gradient and i get a solid black shadow.
Inner Bevel - ?????

Is it possible to do all three things with CSS3 alone? I've googled and racked my brain but I can't seem to get it.

this is my starting point:

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1);
    font-family: sans-serif;
    font-size: 72px;
    background: -webkit-linear-gradient(#FFF, #2358A6); 
                -webkit-background-clip: text; 
                -webkit-text-fill-color: transparent;

This is what i'm trying to achieve (not too crazy right?):

The font isn't important to me right now, just the effects. sans-serif is the default linux font, that's why its there. If it's not possible, i understand, just tell me it's not possible and i'll continue to use my png.

Recommended Answers

All 7 Replies

I've already looked at the first one, it doesn't really look that beveled to me. I was hoping to have the highlight and shadow blurred or gradient like. I was wondering if that specific effect was possible while mixing drop shadow and gradient text. I haven't found anything on google like that, which led me to believe that mixture isn't possible. Thanks for your reply, I'll continue to investigate this. Being able to spit a CSS style out of my program and site would be benificial to me in more ways than one, hince the need.

Hmmm, since I have never done a bevel effect before with css, I may need to google it also. I will do my best and see if I can find something.

this is what i've figured out. it only works in webkit browsers. I really wish I could make this cross-browser compatible.

@import url(http://fonts.googleapis.com/css?family=Didact+Gothic|Carrois+Gothic|Source+Code+Pro);
body { background-color: #ddd; }

h1 {
    font-family: "Didact Gothic";
    font-size: 5em;
    font-weight: 200;

h1 div{
    background: -webkit-linear-gradient(#DAE8EC 30%, #009AF1 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;    
    position: absolute;
    width: 100%;

h1:after {
    text-shadow: -2px -2px 3px rgba(255, 255, 255, 0.51), 4px 4px 4px rgba(0, 0, 0, 0.36);
    color: transparent;
#effects:after {
    content: "welborn prod."
<!-- body's html: -->
<h1 id='effects'><div>welborn prod.</div></h1>

...this is as close as I could get. The webfont is closer than any other font I could find. On a white background you don't even see the highlights. Anyone else have an idea about getting this on firefox (and maybe IE)?

you have to use the web kits.

It may take a good day or two to get a good hang of learning how to make things browser(s) compatible but it would be worth it.

I found this and it may be helpful for you.

thanks for the link, it'll be nice to have a sort-of cross-browser reference. I saw one solution in my search but it involved jquery, but since this isn't just for my website I don't really want to use it.

Okay, if you have any other question about browser support feel free to ask more!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.