Hindered from implementing a linear gradient

The UI team has provided a linear gradient for the button background in the following format:

linear-gradient(bottom, #E4E8EA 0%, #E8EBED 50%, #F1F3F4 96.36%, #FFFFFF 100%), linear-gradient(bottom, #E4E8EA 0%, #e8ebed 50%, #F1F3F4 96.36%, #FFFFFF 100%)

I attempted to implement it as shown below: 

background-image: -webkit-linear-gradient(bottom, #E4E8EA 0%, #E8EBED 50%, #F1F3F4 96.36%, #FFFFFF 100%), -webkit-linear-gradient(bottom, #E4E8EA 0%, #e8ebed 50%, #F1F3F4 96.36%, #FFFFFF 100%);
background-image: -moz-linear-gradient(bottom, #E4E8EA 0%, #E8EBED 50%, #F1F3F4 96.36%, #FFFFFF 100%), -moz-linear-gradient(bottom , #E4E8EA 0%, #E8EBED 50%, #F1F3F4 96.36%, #FFFFFF 100%);
background-image: -o-linear-gradient(bottom, #E4E8EA 0%, #E8EBED 50%, #F1F3F4 96.36%, #FFFFFF 100%), -o-linear-gradient(bottom, #E4E8EA 0%, #e8ebed 50%, #F1F3F4 96.36%, #FFFFFF 100%);
background-image: -ms-linear-gradient(bottom, #E4E8EA 0%, #E8EBED 50%, #F1F3F4 96.36%, #FFFFFF 100%), -ms-linear-gradient(bottom, #E4E8EA 0%, #e8ebed 50%, #F1F3F4 96.36%, #FFFFFF 100%);
background-image: linear-gradient(bottom, #E4E8EA 0%, #E8EBED 50%, #F1F3F4 96.36%, #FFFFFF 100%), linear-gradient(bottom, #E4E8EA 0%, #e8ebed 50%, #F1F3F4 96.36%, #FFFFFF 100%);

However, I have been unable to apply this CSS successfully. The gradients provided have the same color and even trying with just one gradient did not work. Can someone please point out what is incorrect in the above CSS code?

htmlcss

Answer №1

I prefer using the ColorZilla tool, where you can simply paste your code like so-

.your-class {
background: linear-gradient(bottom, #E4E8EA 0%, #E8EBED 50%, #F1F3F4 96.36%, #FFFFFF 100%), linear-gradient(bottom, #E4E8EA 0%, #e8ebed 50%, #F1F3F4 96.36%, #FFFFFF 100%);
}

If your code seems shorter than expected when copied from ColorZilla, it should actually look similar to this code snippet-

background: #f1f3f4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdm... etc

Answer №2

If you're looking for the non-browser prefixed code, it's simply "to bottom".

For more options and variations, you can visit this helpful site:

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

Display a preview image at the conclusion of a YouTube video

I am currently working on an iOS device and have a Youtube video thumbnail that, when clicked, disappears and the video automatically plays in fullscreen mode using an iframe. It's working perfectly. Now, I would like to know how I can make the thumb ...

javascripthtmlyoutube-api

Step-by-step guide on displaying a tag image in HTML using html2canvas

html2canvas($('#header'), { allowTaint: true, onrendered: function (canvas) { var imgData = canvas.toDataURL("image/png"); console.log(imgData); } }); click here for an example ...

javascriptjqueryhtmlhtml2canvas

Can a JavaScript function spontaneously run without being called upon?

<a onclick="determineCountry(data)" class="installbtn">Install</a> My goal is to have the user redirected to one of three sites based on their location when they click the button above. However, there seems to be an issue with the script below ...

javascripthtmlgeolocation

Is there a way to ensure the collapsible item stays in its position?

I'm encountering an issue with the display of items within collapsible cards. Here is what it currently looks like: https://i.sstatic.net/DM8sX.png And this is how I want it to appear: https://i.sstatic.net/BXGpW.png Is there a way to achieve the ...

javascripthtmlcsslayoutbootstrap-4

What are the best ways to create image animations on top of other images using CSS or JavaScript?

Imagine if the first image is in black and white, while the second one is colored. How can we make the black and white image change to color after a timeout period, with an animation similar to loading progress bars? Is this achievable using CSS or JavaScr ...

javascripthtmlcss

When using JQuery's .each method, only the first two elements from an array of automatically generated elements are retrieved

I have a loop that creates multiple divs with the class panel. @for(comment <- event.getCommentsSorted()) { However, when I try to manipulate each of these divs using jQuery's .each, only the first two divs are selected. $(window).on('load& ...

jqueryhtmlcssplayframework

CSS - Adding a Distinctive "Line" to a Navigation Bar

I am attempting to design a unique navbar layout with two "lines". The first line should consist of several links, while the second line would include an HTML select field with a submit button. The following code will generate the desired navbar visual ou ...

css

Looking to minimize the unnecessary spaces within your html tags?

I encountered an issue while creating my custom toast notification in React. There are unnecessary gaps between the elements, causing the size to be larger than intended. React Code import React from 'react' import './CustomToast.css' ...

cssreactjsreact-hooks

What is preventing me from using jQuery to dynamically insert HTML onto the page?

Below is the HTML code for a Bootstrap Modal dialog box: <div class="modal fade" id="rebateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Looking to enhance the size of pagination icons for previous and next pages on a Material-UI React table?

I am looking to adjust the size of the previous page and next page icons in a material table implemented in React. Below is the code snippet: localization = { { body : {} , toolbar: { searchTooltip: 'Search'} , pagination: ...

cssreactjsmaterial-uimaterial-table

Learn how to showcase real-time stock information from Yahoo Finance on an Android device. See the JSON format provided below for guidance

finance_charts_json_callback( { "meta" : { "uri" :"/instrument/1.0/PTC/chartdata;type=quote;range=1d/json/", "ticker" : "ptc", "Company-Name" : "PTC Inc.", "Exchange-Name" : "NMS", "unit" : "MIN", "timezone" : "EDT", "curr ...

javascriptandroidjqueryhtmlajax

angular use ngFor directive to restrict the number of rows displayed in a table

In my angular 6 project, I am trying to limit the display to just five rows in a table using ngFor. My current code snippet is as follows: <tbody> <tr *ngFor="let item of routines; let i = index"> <td style="display: none"> ...

htmlangularhtml-tableangular6

The element's height of 100% falls short of reaching the bottom of its containing element

I have searched through numerous questions, but I am unable to find a solution. Could someone kindly check this link and help me understand why the sidebar is not reaching the bottom of the content div: Using Javascript is not an option for me in this cas ...

htmlcss

With the addition of a key element in the opening statement

Take a look at this code snippet: <div class="content"> This is some title<br/> Some text<br/> And maybe more text. </div> I am trying to wrap the first sentence with a <span> tag before the <br/> element, like s ...

jquerycss

jQuery - translating and organizing names of countries

I have implemented a jQuery function to organize a list of country names based on the user's selected language code (via a language select dropdown). You can find more information on this topic in this related post. The translation of country names s ...

javascriptjqueryhtmlsorting

Eliminate repetitive content in CSS document

I recently discovered the SCCS Compiler () and I am impressed with its capabilities. However, I am in need of an additional feature. After generating a compressed CSS file, I noticed the following: html,body{height:100%;}html,body{height:100%;}html,body{ ...

phpcssmedia-queriesuniquesubstr

Embed video with a custom thumbnail in an iframe

Hello everyone! I'm a first-time user on stackoverflow seeking some help. Currently, I am using Dreamweaver to work with HTML and CSS in order to build a website. My task involves sourcing a video from a television archive and embedding it onto my si ...

htmlcssiframedreamweaver

Overlay of white on top of an image

Is it possible to add a white overlay to an image using a greyscale filter in CSS? I need the overlay to be absolute positioned over the image with a white background and changed opacity setting. The catch is that I cannot use another div, so it has to be ...

htmlcss

Is the zero-height navigation bar still apparent on the screen?

I am currently working on a portfolio website and I have a specific idea in mind for how I want the work to be displayed. I would like it to slide up onto the screen when the user clicks on the portfolio section, similar to how a navigation bar slides over ...

javascriptjqueryhtmlcss

Issue with jQuery fadeTo() not working after appendTo() function completes

I am facing a problem with the code below that is meant to create a carousel effect for my website. The main issue I am encountering is that the original fadeTo() function does not actually fade the elements, but rather waits for the fade time to finish an ...

javascriptjqueryhtmlcss