simona6 Posted June 18 Share Posted June 18 .class{ -webkit-background-clip: text; color: none; background: linear-gradient(#333333 45%, #000000 73%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } I want to apply this gradient so it is lighter at the top, ie if it was white at the top and soft grey at the bottom. The problem is, if I do this to text that is bold and goes to two lines, the top line is one shade and the bottom is the other shade. Rather than might splitting the two rows into two tags, can this be done on a 'per line' basis? Quote Link to comment Share on other sites More sharing options...
Barand Posted June 18 Share Posted June 18 The gradient is applied across the whole element, not across each row. Put each row in it's own element Quote Link to comment Share on other sites More sharing options...
simona6 Posted June 19 Author Share Posted June 19 So it's impossible to make it the way I explained? IE if you had a slogan, and it had to be on two rows... you have to them make two rows of H2 tags.. and apply the gradient to each row? That's very awkward. Quote Link to comment Share on other sites More sharing options...
Barand Posted June 19 Share Posted June 19 You could have a look at https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/repeating-linear-gradient Quote Link to comment Share on other sites More sharing options...
simona6 Posted June 19 Author Share Posted June 19 Yes in fact I recently found that repeating code myself. It does need some additional em code in the CSS, but it does the job. Quote Link to comment Share on other sites More sharing options...
Barand Posted June 19 Share Posted June 19 The trick is to get the right ratio between gradient length and font size. With font "arial black" I found grad length px : font_size pt approx 1.8 : 1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example</title> <style type='text/css'> body { background-color: #000; } .gradhead { font-family: "arial black"; font-size: 30pt; background: repeating-linear-gradient(#FFF , #EEE , #006EFC 55px); -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: 30%; float: left; padding: 8px; } </style> </head> <body> <div class="gradhead"> LINE 1 </div> <div class="gradhead"> LINE 1<br> LINE 2 </div> <div class="gradhead"> LINE 1<br> LINE 2<br> LINE 3 </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Danishhafeez Posted June 27 Share Posted June 27 To achieve a gradient that transitions from lighter at the top to darker at the bottom on a per-line basis, especially when the text spans multiple lines and is bold, you can utilize the background-clip: text property along with a linear gradient background. .class { color: transparent; /* Hides the original text */ background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%); -webkit-background-clip: text; /* For Safari */ background-clip: text; -webkit-text-fill-color: transparent; /* Ensures the text is transparent */ font-weight: bold; /* Optionally, if your text is bold */ } Color and Gradient Setup: color: transparent;: This makes the original text color transparent so that it doesn't show. background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%);: Defines a linear gradient that starts with #FFFFFF (white) at the top (0%) and transitions to #CCCCCC (light grey) at the bottom (100%). Background Clip: -webkit-background-clip: text;: Ensures that the background gradient is clipped to the shape of the text. This property is prefixed for compatibility with older versions of Safari. background-clip: text;: Standardized version of background-clip for other browsers. Text Color: -webkit-text-fill-color: transparent;: Ensures the text itself remains transparent so that the gradient background shows through the text. Best Regard Danish hafeez | QA Assistant ICTInnovations Quote Link to comment Share on other sites More sharing options...
Barand Posted June 27 Share Posted June 27 @Danishhafeez Again (with amazing consistency)... All you (and your pet AI?) have done is replicate the original problem, demonstrated below <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Bovine Excrement</title> <style type='text/css'> .class { color: transparent; /* Hides the original text */ background: linear-gradient(to bottom, #FFFFFF 0%, #CCCCCC 100%); -webkit-background-clip: text; /* For Safari */ background-clip: text; -webkit-text-fill-color: transparent; /* Ensures the text is transparent */ font-weight: bold; /* Optionally, if your text is bold */ } </style> </head> <body> <h1 class='class'> Line 1<br> Line 2<br> Line 3 </h1> </body> </html> Giving Quote Link to comment Share on other sites More sharing options...
simona6 Posted July 1 Author Share Posted July 1 It's that line height thing that's the problem. Sometimes it works if you use 50%. Quote Link to comment Share on other sites More sharing options...
Barand Posted July 1 Share Posted July 1 try setting the line-height to same as gradient length... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.