Is there a way to apply dual linear-gradients to both the left and right borders simultaneously?

I want to design a yellow div with wide left and right borders that gradually fade to white towards the edges to create a transparent effect.

Although I have successfully created the div, I am struggling to achieve the desired gradient:

.fade {
  margin: 2em 2em; padding-top: 2em; padding-bottom: 2em;
  background: rgb(242,242,194);

  border-right: 3em black solid;
  border-left: 3em black solid;
  border-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(242, 242, 194) 100%);
{
<div class="fade">Text</div>

As shown above, the linear gradient successfully changes the black borders to yellow, but it does not achieve the desired white fading effect. The gradient is not visible at all.

The final design I am aiming for is like this:

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

What am I doing incorrectly?

htmlcsslinear-gradients

Answer №1

If you're unfamiliar with gradients and prefer not to deal with them directly, consider using the Colorzilla gradient tool: 

    .fade {
      margin: 2em 2em; padding-top: 2em; padding-bottom: 2em;
      background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 5%, rgb(242, 242, 194) 95%, white 100%);
    }
<div class="fade">Text</div>

Perhaps this example could be helpful?

I will explain the process.

I removed any attributes related to border and only used background.

background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 5%, rgb(242, 242, 194) 95%, white 100%);

This gradient consists of 4 steps:

  • The initial step indicates the gradient starts with white.
  • The second step (5% of the element's width) transitions to yellow.
  • Continuing until the third step (95% of the width).
  • Finally, the fourth step ends back in white.

Note that the percentages refer to the width because the gradient is rotated 90 degrees; using 0 or 360 affects the height aspect of the gradient.

One last thing to note is that some padding inside the div will help the text match your photo accurately.

Answer №2

div {
  background: linear-gradient(90deg, white 0%, rgb(242, 242, 194) 8%, rgb(242, 242, 194) 92%, white 100%);
  padding: 15px;
  margin: 30px;
}
p {
  padding-left: 50px;
}
<div><p>Text</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

Evaluating h1 content in HTML using Angular Protactor testing

I am completely new to end-to-end testing. I have a login page in my application that should be displayed to users when they log out. However, I am facing an issue with retrieving the text from a specific div element containing an h1 tag, leading to unexpe ...

htmlangularseleniumprotractorend-to-end

Fixed navbar at the bottom of the page that transitions to static when scrolling reaches a certain location

Is it feasible to achieve this using Bootstrap v3? After conducting extensive research, it appears that a custom solution may be necessary. In essence, I am working with a navbar positioned at the bottom of the content area. Upon page load, if the navbar& ...

javascriptjqueryhtmlcsstwitter-bootstrap

The image does not adjust size properly on mobile devices

How can I enable pinch-zoom and the ability to move around to view an enlarged image on mobile devices? https://i.sstatic.net/6JGRh.png Despite trying to add user-scalable=yes to the viewport meta tag, the image remains fixed within the viewport. Any sug ...

htmlcssresponsive-design

Utilizing Javascript Conditional for Substitution

Currently, I have a JavaScript function that replaces all links with registration messages: <script> function replaceLinks() { var links = document.querySelectorAll('.restore a:link'); for (var i = 0; i < links.length; i++) { ...

javascriptcss

How to center text in a DIV using CSS Bootstrap?

I'm a beginner in front-end development and I'm struggling to center the text below the image within this div. I want the text centered just below the image. I'm using Bootstrap for this project, and here's the code snippet I'm wor ...

cssbootstrap-4bootstrap-5

Tips for verifying that a file has not been selected in Croppie

Whenever I use croppie to crop images on my website, everything works fine when I select an image and upload it. But if I try to crop and upload without selecting an image, a black image gets uploaded instead. How can I validate if the file upload is empty ...

javascriptphpjqueryhtmlcodeigniter-3

Unusual behavior exhibited by MUI Grid in the presence of spacing

I am working on a code snippet that looks like this: <Box sx={{height:'100vh', background: '#f5f7fc', overflow:'auto'}}> <Grid container justifyContent={'center'} padding={2}> <Grid item ...

cssreactjsmaterial-uiflexbox

The top section of the page is not properly aligned with correct bootstrap spacing and margins, leading to a

Inspiration theme: Porto (The work items on the right are aligned with the top of the viewable portion of the page) when selecting 'view all' on the left menu. Website using the Porto template: DMMBlitz (The work items on the right are NOT alig ...

htmlcssbootstrap-5

What is the best way to identify the position of an element in an array given my specific circumstances

I am trying to utilize the ng-repeat directive in order to display an array. Here is what I have: <div ng-repeat="stu in school"> <div>{{stu.name}}</div> <div>{{stu.grade}}</div> </div> JavaScript $scope.scho ...

javascriptcssangularjs

Allow users to select options after they click a radio button

I have a pair of radio buttons and two sets of select options within different classes. Upon selecting the first radio button, the select options belonging to class1 should be enabled. On the other hand, upon selecting the second radio button, the select ...

javascripthtml

Searching for image labels and substituting the path string

Upon each page load, I am faced with the task of implementing a script that scans through the entire page to identify all image src file paths (<img src="/RayRay/thisisianimage.png">) and then add a specific string onto the file paths so they appear ...

javascriptjqueryhtmlarrays

Aligning Content in the Middle of a Bootstrap Row

I'm struggling to horizontally center the content in the "row" class div. I've attempted using justify-content-center and other variations. <div class="container"> <div class="row"> <div class="col-md-4 portfolio-item ...

htmlcssbootstrap-4

Tips for maintaining the size of a div container

Take a look at the following code snippet: <head> <title></title> <style> .section_divs { background-color: lightblue; float: left; } #section_empty { background-color: tomato; width ...

htmlcss

Change the absolute positioning of a div element to be applied globally

When trying to get the position of an element using jQuery's .offset(), I then set the div to have a position:absolute; and adjust its left and top based on the information obtained from offset(). This method works well when all the element's pa ...

jqueryhtmlcsspositioncss-position

Display an image from the API that rotates when hovered over with the mouse

Currently, I am fetching data from pokeapi.co and dynamically inserting it into a table. This data includes various stats and an image. My goal is to make the image rotate when hovered over. While creating the table, I added an id="pokeImage" dynamically. ...

javascriptjquerycssajax

Having trouble with sending information to the PHP server, unable to determine the root cause

Can someone help me figure out why the data from a form being sent to a php script for sending an email isn't working correctly? It's part of a template code but I suspect there might be an error. Specifically, I believe the {'userName' ...

phpjavascripthtmlemail

javascript The unchecking of a checkbox is not functioning

I am facing an issue with this JavaScript code. The problem is that when I uncheck a value, it removes all the values from the result instead of removing just the specific unchecked value. Can someone please help me with this? <script> window.addE ...

javascriptjqueryhtmlcheckbox

The typography components within material-ui are appearing side by side on the same row

I'm having an issue with my typography components appearing on the same line instead of two separate lines. I've tried various methods to fix it but nothing seems to work. <div class="center"> <Typography variant=&q ...

cssmaterial-ui

Aligning a number in the center both vertically and horizontally within a div that is inside a table-cell

Is there a way to center a number both vertically and horizontally within a div that needs to be 60px in width and height, shaped like a circle, and placed in the center of a table-cell? I've managed to center the div within the table-cell but can&apo ...

htmlcss

Tips for getting rid of the glowing effect on MUI slider thumbs when they are in focus

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

htmlcssreactjsmaterial-ui