Tile with colorgradient

2 posts, 0 answers
  1. Thomas Luck
    Thomas Luck avatar
    38 posts
    Member since:
    Jun 2006

    Posted 12 Feb 2015 Link to this post

    Hello Telerik team

    I am curious whether i can create a color gradient like windows 8 tiles have it.

    Thomas Luck
  2. Marin Bratanov
    Marin Bratanov avatar
    3564 posts

    Posted 12 Feb 2015 Link to this post

    Hi Thomas,

    Have you tried overriding the background CSS property of the desired tile? Here is an example I built by using an online gradient generator:

    <telerik:RadTextTile runat="server" ID="RadTextTile1" CssClass="myGradientTile"></telerik:RadTextTile>
        background: #a90329; /* Old browsers */
        background: -moz-linear-gradient(top#a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top#a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top#a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top#a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
        background: linear-gradient(to bottom#a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */


    Marin Bratanov

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
Back to Top