Steps to configuring reverse gradient in a solitary line

Question

Steps to configuring reverse gradient in a solitary line

I have successfully resolved similar issues with diagonal gradients in the past. However, I am currently facing challenges with linear gradients.

Previously, I was able to create a gradient with a cross pattern.

background: linear-gradient(to right, transparent 40%,#f00 50%,transparent 60%), 
            linear-gradient(to bottom, #fff 20%,#f00 50%,#fff 80%);

My current struggle is creating a gradient that fades from white to red on the left half and vice versa on the right half.

Here is what I attempted:

background: linear-gradient(to bottom, transparent 50%,#ff0 100%), 
            linear-gradient(to right, transparent 50%,#f00 100%);

However, the yellow portion is not displaying as intended. How can I correct this issue?

This is the desired outcome:

https://i.sstatic.net/RsX3f.png

html css gradient linear-gradients

Answer 1

Answer №1

By utilizing a single element and a clever background rule, it becomes feasible to achieve this effect effortlessly. Simply allocate 50% of the container's width to each gradient along the X-axis, position one on the left side and the other on the right using background-position, and prevent any repetition by specifying background-repeat: no-repeat.

div {
  height: 100px;
  background: linear-gradient(to top, red 10%, yellow 50%), linear-gradient(to bottom, red 10%, yellow 50%);
  /* background-size: 50% 100%; Ideally this should be enough but it leaves a white line in the middle in snippet for some reason and so use below setting */
  background-size: 50% 100%, calc(50% + 1px) 100%;
  background-position: 0% 0%, 100% 0%;
  background-repeat: no-repeat;
}

<div></div>

Answer 2

By utilizing a single element and a clever background rule, it becomes feasible to achieve this effect effortlessly. Simply allocate 50% of the container's width to each gradient along the X-axis, position one on the left side and the other on the right using background-position, and prevent any repetition by specifying background-repeat: no-repeat.

div {
  height: 100px;
  background: linear-gradient(to top, red 10%, yellow 50%), linear-gradient(to bottom, red 10%, yellow 50%);
  /* background-size: 50% 100%; Ideally this should be enough but it leaves a white line in the middle in snippet for some reason and so use below setting */
  background-size: 50% 100%, calc(50% + 1px) 100%;
  background-position: 0% 0%, 100% 0%;
  background-repeat: no-repeat;
}

<div></div>

Answer 3

Answer №2

Note: Achieving this effect with a single background is feasible, as demonstrated in Harry's solution.

~~While it may seem difficult to achieve using just one background rule on your element,~~ you can make use of the ::before and ::after pseudo elements.

div {
  width: 100%;
  height: 50px;
  border: 1px solid black;
  position: relative;
  background: linear-gradient(to bottom, red 0%, #ff0 100%);
}
div::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to top, red 0%, #ff0 100%);
}

<div></div>

Answer 4

Note: Achieving this effect with a single background is feasible, as demonstrated in Harry's solution.

~~While it may seem difficult to achieve using just one background rule on your element,~~ you can make use of the ::before and ::after pseudo elements.

div {
  width: 100%;
  height: 50px;
  border: 1px solid black;
  position: relative;
  background: linear-gradient(to bottom, red 0%, #ff0 100%);
}
div::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to top, red 0%, #ff0 100%);
}

<div></div>

Steps to configuring reverse gradient in a solitary line

Answer №1

Answer №2

Similar questions

Separate the business logic from the HTML code in Angular to prevent repetition and make the code

Are your divs getting truncated?

Increase the parent height by 100% when the child element expands

Unable to decrease the width of a div element in Vuetify and Nuxt

perfecting the animation of popovers

What are the steps to create a "gooey glide" animation using React and MUI?

Arrange the <form:radiobuttons> in a vertical position

What is the best method for showing information beneath each tab?

Having trouble with HTML on Eclipse for Android development?

Having trouble selecting links in the navigation bar

Unable to make changes to the text within the textarea field

Checking the opacity with an if/else statement, then adding a class without removing the existing class

Angularjs directive retrieves infowindow DOM element from Google Maps

React's Material-UI AppBar is failing to register click events

Issue with VueJS components not functioning as expected with routes

The QWebview is not rendering the HTML page correctly

Tips for creating an onChange function in an input field using jQuery

emphasizing the specific text being searched for within the page

Database not receiving input data from AngularJS form submission

Why is it that this particular line of code sometimes gives me an "undefined" result before returning an actual value?