CODEWITHSUNDEEP
csstextbackground
amadeo
amadeo

Reputation: 109

How to add gradient background to text (multiple lines)

I found this jsfiddle on the internet. Does anyone of you know how I can change the background color from white into a gradient color? The gradient color should "restart" on each new line. Please see desired wish on "example 2" in this image: http://www.managers.dk/css-text-background.jpg

http://jsfiddle.net/omgmog/g3MQf/

h1 { width:480px; font:bold 36px sans-serif; letter-spacing:-1px; color:#000; }

h1 { 
background: #fff; 
display:inline; 
white-space: pre-line; 
position: relative; 
padding: 9px 0; 
line-height: 54px;
-moz-box-shadow: -20px 0 0 #fff, 20px 0 0 #fff;
-webkit-box-shadow: -20px 0 0 #fff, 20px 0 0 #fff;
box-shadow: -20px 0 0 #fff, 20px 0 0 #fff;
}

Thanks!

Upvotes: 2

Views: 2978

Answers (4)

krishna vamsi chavali
krishna vamsi chavali

Reputation: 1

Add

    -webkit-box-decoration-break:clone;

to your css and it will restart the gradient in every line.

Upvotes: 0

Huginn
Huginn

Reputation: 230

If you're unfamiliar with gradients there are tools out there that will help you do it more visually. One such tool is http://www.colorzilla.com/gradient-editor/ which will allow you to visually build your gradient, then click a button to copy that code to be pasted into your CSS file. It will provide you with browser safe options for most of the main browsers. simply add it to your background CSS code and it should produce the result you requested.

I hope this helps!

Upvotes: 1

Sunil Gehlot
Sunil Gehlot

Reputation: 1589

Please check my updated answer. I have added background-attachment:fixed; to get the desired output.

h1 { width:480px; font:bold 28px sans-serif; letter-spacing:-1px; color:#fff; 
background: -webkit-linear-gradient(left, #085d9d 0%, #92d5ff 100%);
background: -moz-linear-gradient(left, #085d9d 0%, #92d5ff 100%);
background: -o-linear-gradient(left, #085d9d 0%, #92d5ff 100%);
background: linear-gradient(to right, #085d9d 0%, #92d5ff 100%); 
background-attachment:fixed;
display: inline;
line-height: 50px;
padding: 7px 3px;
white-space: pre-wrap;
}
    <h1>Some dynamic HTML text on several lines with a background that suits well and some margins around it.</h1>

Upvotes: 2

Chris
Chris

Reputation: 6233

I don't believe there is a way to accomplish what you are looking for in plain CSS since there is no "new line" selector. The only way to do it is to explicitly define each new line by wrapping the text into a span element.

body
{
    padding:50px;
    background:#fff;
}
h1
{
    width:480px;
    font:bold 36px sans-serif;
    letter-spacing:-1px;
    color:#000;
    display:inline; 
    white-space: pre-line; 
    position: relative; 
    padding: 9px 0; 
    line-height: 54px;
}
h1 span
{
    background: -moz-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(148,199,247,1)), color-stop(100%, rgba(32,124,229,1)));
    background: -webkit-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
    background: -o-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
    background: -ms-linear-gradient(left, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
    background: linear-gradient(to right, rgba(148,199,247,1) 0%, rgba(32,124,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c7f7', endColorstr='#207ce5', GradientType=1 );
}

header
{
    width: 550px;
}
<body>
  <header>
    <h1>
      <span>Some dynamic HTML text on</span>
      <span>several lines with a background</span>
      <span>that suits well and some margins</span>
      <span>around it.</span>
    </h1>
  </header>
</body>

Upvotes: 4

Related Questions