Applying a color gradient to a specific spot on the page, regardless of how far down users scroll

I have implemented a CSS code to add a shadow effect to the top part of my webpage, similar to what Facebook does on user profile pages. While this works well for shorter pages, I am encountering issues with longer pages where the shadow extends too much and covers parts of the content. I have tried setting specific height values, but that only creates unwanted dividing lines.

Here is the code I am currently using:

background: black;
background: -moz-linear-gradient(top, black 0%, #f0f2f5 10%);
background: -webkit-linear-gradient(top, black 0%, #f0f2f5 10%);
background: linear-gradient(to bottom, black 0%, #f0f2f5 10%);

Does anyone have any ideas on how to resolve this issue? Any help would be greatly appreciated!

css

Answer №1

To maintain a consistent gradient height, it is recommended to use pixel values rather than percentage values.

div {
  background: linear-gradient(to bottom, black 0px, #f0f2f5 50px);
  width: 100px;
}

body {
  display: flex;
}
<div style="height: 100px;"></div>
<div style="height: 400px;"></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

Troubleshooting the z-index issue with CSS checkbox hack

Using the css "checkbox hack" to trigger the display of a form when a label is clicked. The form is styled using a :before pseudo element to create a transparent background, but the z-index is not working as expected. Despite adjusting z-index values, the ...

htmlcssuser-interfacez-index

When the only source is available, the image undergoes a transformation

Is there a way to dynamically adjust the height of an image using JQuery or JavaScript, but only when the image source is not empty? Currently, I have an image element with a fixed height, and even when there is no source for it, Chrome still reserves sp ...

javascriptjqueryhtmlcss

Tips for converting inline CSS to stand-alone attributes without any cost

I am attempting to modify an au generated HTML code, for example: <div class="intro editable" id="field_text">text <strong>text</strong> text <span style="text-decoration: underline;">text</span> <span style="color: #ff00 ...

phphtmlcssregex

divs adjusting to available height

Here is an example code snippet: <div id="parent"> <div id="top"> </div> <div id="mid"> </div> </div> Link to Example I am looking to position the green div below the yellow one, with its height always ...

htmlcsslayout

Tips for including a new class in an HTML element

My goal is to add a specific class to an HTML tag, if that tag exists. This is the code I have attempted: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>index</title> <style> ...

javascriptjqueryhtmlcss

Is there a way to eliminate the gap between two horizontal rule tags?

What causes the space between two <hr> tags to remain? Despite setting the width of the <hr> tags to 49%, there is still a gap between them. How can this space be removed from the <hr> tags? Shown below is the HTML and CSS code: *{mar ...

htmlcss

What is the best way to ensure that my top menu remains fixed while scrolling?

Link to website: I am looking to have the top menu on my page remain fixed at the top of the screen as users scroll. Does anyone know if this is achievable, and if so, how can I implement it? ...

javascripthtmlcsstwitter-bootstrap

Is there a rationale behind using intricate CSS classes such as page-left-column-container-box-element-header for technical purposes?

What is the reasoning behind using this specific CSS and HTML structure for styling web pages? <div class="page"> <div class="page-left-column"> <div class="page-left-column-container-box"> <div class="page-left-column-con ...

htmlcssxhtml

Is there a way to shift this modal to the right?

I am facing an issue with aligning a button modal to the right side. I attempted using bootstrap classes like : float:right, mt:20 Unfortunately, these did not have the desired effect. Below is my code snippet: <b-modal ref="my-modal" hide-fo ...

htmlcsstwitter-bootstrapvue.js

Adjust the stacking order to remove focus from the text field

Currently, I am facing an issue with my search box not unfocusing when clicked. My goal is to have the search box lose focus when anything on the page is clicked, especially the background (div.bb). The elements positioned above the background are set to p ...

jqueryhtmlcss

CSS: The sub-class functionality is not functioning as intended

Having trouble with this HTML element : <span class="item-menu-notif non-lue" onclick="dosomething(2150)"> TEXT </span> These are the CSS classes : .item-menu-notif{ display: block; cursor: pointer; padding: 0 0.4em 0 0.4em; } s ...

htmlcss

Embrace the strange quirks of each individual

I attempted to find a simple solution for creating a box within a class. However, I encountered an issue where it only displayed the first element in the array. Upon echoing out the $values variable, the entire CSS code was returned and I attempted to plac ...

phpcssforeach

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

I am currently working on a one-page website and I would like to include a map as a background behind the "contact" section. The map can be set to float, draggable, or positioned at the back. I have experience using both the Google Maps API and LeafletJS, ...

javascripthtmlcssgoogle-mapsleaflet

Strange behavior in Chrome when using Bootstrap Gradient

Chrome started behaving oddly with the Bootstrap class .bs-gradient, randomly changing the gradient to color breaks of black, lightblue, darkblue, and more: https://i.sstatic.net/BGabA.png This is the code for one of those boxes: <link rel="style ...

htmlcssgoogle-chromegradientbootstrap-5

Altering the appearance of an Angular component in real-time by applying various CSS style sheets

I'm currently working on implementing a dynamic style-sheet change for a single-page application using Angular. The concept is to offer users the ability to select from various themes through a dedicated menu. Although only two theme variants are show ...

cssangulardynamicstyles

The website flickers in and out as it loads

My site keeps flashing whenever it loads. Despite trying the solutions recommended in this stackoverflow post, I have had no success. Every page on my website loads a nav.html file using this code: $.get("nav.html", function(data){     $("#nav-placeho ...

javascriptjqueryhtmlcss

The issue with collapsible elements not functioning properly in an Angular application involving CSS and JS

My implementation of collapsible in a plain HTML page looks like this: <!DOCTYPE html> <html> <head> <title></title> <style> button.accordion { background-color: #777; color: white; cursor: pointer; p ...

javascripthtmlcssangular

Modifying Div Size with Jquery

I am working on populating the div container with square boxes, but I'm having trouble adjusting the size of my #gridSquare div. Despite trying to change its height and width using jQuery, it doesn't seem to work as expected. $('#gridSquare ...

javascriptjqueryhtmlcss

JavaScript snap.js button

I'm looking to implement a Toggle button with snap.js from the following source: https://github.com/jakiestfu/Snap.js. The usage instructions on the website are quite concise and I'm struggling to grasp them. Below is the code I've put toget ...

javascriptjqueryhtmlcss

Enhance user interactivity on your website by incorporating jQuery and CSS for

<table id="tab"> <tr aaa="one" bbb="ooo"><td>xxx</td><</tr> <tr aaa="two" bbb="one"><td>xxx</td><</tr> <tr aaa="three" bbb="one"><td>xxx</td><</tr> ...

javascriptjqueryhtmlcss