Is it feasible to create a full-page text gradient clip without it repeating on each individual element?

.gradient {
  background-color: #00ccaa;
  background: linear-gradient(0deg, #00ccaa, #f530a9);
  background-size: cover;
  background-clip: text;
  box-decoration-break:slice;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break:clone;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

.content{
  width:90%;
  max-width: 800px;
  margin-right:auto;
  margin-left:auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
  }
<h1 class="gradient">HEADING EXAMPLE:</h1>
<h3>Thats a subtitle </h3>

<div class="content">
<p>What is Lorem Ipsum? <span class="gradient">Lorem Ipsum is simply dummy </span>text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <span class="gradient">It was popularised in the 1960s </span>with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>

<div class="content">
<p>What is Lorem Ipsum? <span class="gradient">Lorem Ipsum is simply dummy </span>text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <span class="gradient">It was</span> ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen <span class="gradient">popularised in the 1960s </span>with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p></div>

I have incorporated gradient texts on my webpage. Check out the example here

My query pertains to extending the gradient across the entire page and then clipping it onto the text.

Is it possible to achieve a cohesive gradient throughout the page without repetitive gradients appearing in various headings?

I attempted implementing this solution but encountered issues:

  background-size: 100vmax;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  background-clip: text;
  box-decoration-break:slice;

While researching, I stumbled upon a similar solution on CodePen: https://codepen.io/cmalven/pen/PoEJvjE

htmlcssgradientcss-gradientsbackground-clip

Answer №1

For an enhanced effect, consider including background-attachment: fixed; in your gradient class.

.gradient {
  background-color: #00ccaa;
  background: linear-gradient(0deg, #00ccaa, #f530a9);
  background-size: cover;
  background-clip: text;
  box-decoration-break: slice;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  background-attachment: fixed;
}

.content {
  width: 90%;
  max-width: 800px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
<h1 class="gradient">HEADING EXAMPLE:</h1>
<h3>Thats a subtitle </h3>

<div class="content">
  <p>What is Lorem Ipsum? <span class="gradient">Lorem Ipsum is simply dummy </span>text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <span class="gradient">It was popularised in the 1960s </span>with the release
    of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div class="content">
  <p>What is Lorem Ipsum? <span class="gradient">Lorem Ipsum is simply dummy </span>text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
    and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <span class="gradient">It was</span> ever since the 1500s, when an unknown printer
    took a galley of type and scrambled it to make a type specimen <span class="gradient">popularised in the 1960s </span>with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
    PageMaker including versions of Lorem Ipsum.</p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to undo the transition when hovering out?

Is it possible to achieve a reverse transition animation on hover out using CSS? I want the "Menu" text to slide to the right blue line when I hover out, and after a delay of 400ms, slide back from the left grey line. Can this be done? .menu { displ ...

csscss-transitions

Incorporating the Results of a Script into TinyMCE with the Help of

Recently, I developed a script for creating a basic table layout structure. To enhance its functionality, I decided to integrate AJAX with jQuery in order to input the output of the script into a TinyMCE textarea. The PHP script itself works seamlessly whe ...

phpjqueryhtmlajaxtinymce

What determines the root element of the CSSOM (CSS Object Model)?

As I dive into my research on browser rendering, I've reached the stage in the rendering process where the browser creates the CSSOM from raw CSS. In many tutorials I've encountered, the authors confidently state that the body element is the roo ...

cssdomcssom

What is the most effective method for altering HTML form components using PHP?

Can you explain how to manipulate and add form elements using PHP? Let's say I have a form stored in a PHP variable like this: $originalForm = ' <form method="post" action="whatever.php"> <input type="text" name="iamtextfield" id="text ...

phphtmlregexdomxpath

Tips for using various versions of jQuery at the same time

Despite searching on Stack Overflow, none of the answers provided seem to work for my issue. My requirement is to utilize two separate versions of jQuery. Below is the code snippet: I first link to the initial version and use the following code: <sc ...

javascriptjqueryhtml

Why is the jQuery class not responding to the is(:visible) selector?

Having trouble with this issue, I created a fiddle to demonstrate what I'm trying to achieve: http://jsfiddle.net/x2btM/9/ Below is the code snippet: <div id="ZodOneDragBox"> <div id="aquariusSelectedComp1" class="killSelectedComp1" sty ...

javascriptjqueryhtml

Ways to transfer JavaScript arguments to CSS style

Currently, I am developing a web service using Angular and Spring Boot. In this project, I have implemented cdkDrag functionality to allow users to place images in specific locations within the workspace. My goal is to maintain the placement of these image ...

htmlcssangulartypescript

Certain images are not being retrieved by Express on Linux, although they are functioning properly on Windows

When using a template to display HTML code, everything works smoothly on Windows. However, when transferring the code to a Linux machine, an issue arises - "Cannot GET /SmallVacImages/1.jpg". It seems that the index.html file can load images from the publi ...

javascripthtmllinuxexpress

What steps do I need to take to ensure the CSS hover effect functions properly?

After conducting a simple test underneath the main divs, I found that it works as intended. However, the primary one is not functioning properly. I attempted to apply the class "services-icon" to the div containing the image, but it still did not work. I ...

htmlcss

Adding padding-top to the h1 element within a vertically aligned div

I have a div with a set height and the content inside adjusts vertically according to the height. To align it vertically, I added the property display-table; to the parent div and display: table-cell; vertical-align: middle; to the child div. The alignment ...

css

Transferring mouse events from iframes to the parent document

Currently, I have a situation where my iframe is positioned over the entire HTML document. However, I am in need of finding a way to pass clicks and hover events from the iframe back to the main hosting document. Are there any potential solutions or alter ...

javascripthtmliframedom-events

the dropdown menu toggle is not working as expected

My dropdown icon is not appearing and the menu options are not functioning properly. Despite trying to use a script to display the text when an option is clicked, it doesn't seem to be working. It appears that the toggle functionality is not working ...

javascripthtmlcssdrop-down-menu

What steps are involved in incorporating dynamic pagination in PHP using this particular snippet of code?

I am looking for a way to display a list of numbers from 1 to 1000 in a single line with the ability to scroll. However, I need to exclude both "Prev" and "1" from this list. How can I achieve this? Below is the code snippet that I currently have: echo ...

phphtmlcsstwitter-bootstrappagination

Is there a way to eliminate the outline on a FormControl component in React-bootstrap when the input field is selected?

Currently, I'm working on creating a search bar with dropdown suggestions using React-bootstrap. My goal is to have the search bar span across the page from one side to another with margins on the left and right. To achieve this, I am enclosing the in ...

cssreactjsinputbootstrap-5react-bootstrap

Is it possible to load a route first, and then proceed to load the static files from the public folder in a Node.js application?

When running the app.js file for Node.js, I am trying to ensure that the '/' route is loaded first. This route handles authentication and then redirects to the index.html file. However, I am encountering an error because the program cannot find ...

htmlnode.jsexpressauthenticationpassport.js

Modifying the onclick function for a bootstrap glyphicon

How can I swap the .glyphicon-menu-down to glyphicon-menu-up when a user clicks on a link? Currently, it's not working as expected. Could there be an issue with my jQuery implementation? Markup <a data-toggle="collapse" data-parent="#accordion" h ...

javascriptjqueryhtmltwitter-bootstrap

Alignment vertically in a Razor view

Here is a snippet of code I am working with: <p> @Html.LabelFor(m => m.address, new { style="vertical-align: middle;" }) @Html.TextAreaFor(m => m.address, new { @class = "addition ", value = "",rows="4", required = "required" }) </p> A ...

htmlcssrazor

What is the best way to implement Bootstrap in Coda2?

I am new to web design and I am trying to incorporate Bootstrap into my HTML code using Coda2. Since I don't have access to a server, I am referencing the directory address of CSS files on my hard drive instead of a web address. Currently, the beginni ...

htmlcsstwitter-bootstrapcoda

Establishing the Backbone router configuration

Having trouble identifying the issue with my Backbone router. Is there an error within this code block? The index route is functioning correctly, but the classes route doesn't seem to be triggered (for example, when I try navigating to a URL like loca ...

javascriptjqueryhtmlbackbone.jsurl-routing

Encountering a predicament when attempting to retrieve an image from an alternative

[index.jsp][5] style.css [problem][6] [folder hierarchy][7] Although everything runs smoothly when the file is located in the css directory, it fails to show any images if placed in the images folder. Kindly provide assistance. ...

htmlcssjsp