How to add gradient to text via CSS

Keep in mind, this is a webkit only for the time being.

  1. article Completed

    Quick Tip: Pure CSS Text Gradients | Nettuts+

    With the latest advancements in CSS, we now have access to powerful styling techniques, including box shadows, rounded corners, background gradients, etc. However, we don't currently have the ability to apply gradients to the text itself. Luckily, with a bit of trickery, we can force this effect - at least in webkit browsers!

    Edit Remove Move
  2. article Completed

    Gradient Text | CSS-Tricks

    This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text. h1 { font-size: 72px; background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

    Edit Remove Move
  3. article Completed

    CSS Gradient Text Effect

    Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty tag in the heading and apply the background image overlay using the CSS position:absolute property.

    Edit Remove Move
  4. embed Completed

    GitHub's CSS Performance

    Edit Remove Move

Continue learning by following more paths or create your own. Join for FREE

By clicking 'Get Started Free' you agree to our Terms of Service and Privacy Policy