CSS で テキストにグラデーションをつける方法

Question

ぐぐってみたのですが、最新の動向がわかりませんでした。

今現在、テキストにグラデをつける方法としてはどのようにしていますか？

CSSに詳しい方がいましたら教えてください。

Answer 1

http://www.css3maker.com/
http://www.bad-company.jp/box-shadow/
http://www.css-generator.net/text-shadow/
http://matome.naver.jp/odai/2132750704946539001
https://blog.codecamp.jp/css_button_design
http://www.css3factory.com/linear-gradients/

適当なジェネレータを使っています。
ベンダープレフィックスを含んでいるものがあります。

Comments

[enokiyo]

ありがとうございます！

[makoto-n]

http://makurazaki.org/web/css/post-614/
http://www.db.gs/article/392260744.html
トレンドなものを目指すということでしたら、こちらも参考にしてみては？

Answer 2

こういう感じではどうです？

CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新）

Comments

[enokiyo]

こちらの方法はwebkit限定ですか？

[ogaaaan]

CanIUseというサイトがあるので、ここにcssをいれてみて、確認してみてください。対応ブラウザ出てきます。
↓
http://caniuse.com/

ベンダプレフィックス抜きの`mask-image`など入れてみれば使い方わかると思います。