Having trouble with CSS3 linear gradient in Firefox?

I used Adobe Fireworks CS6 to create a CSS linear gradient code. My gradient is meant to transition from light blue at the top to dark blue at the bottom. While it displays correctly on Chrome and Safari, Firefox is showing the colors in reverse - dark blue on the left and light blue on the right. As I am new to HTML and CSS, I am unsure of what could be causing this issue. I have tried adjusting the degrees (-90deg, 90deg, 0deg) but nothing seems to work. Please HELP!!!

color: #FFF;
/* Firefox v3.6+ */
background-image: -moz-linear-gradient(50% 0% -90deg,rgb(101,165,227) 1%,rgb(0,78,157) 99%);
/* safari v4.0+ and by Chrome v3.0+ */
background-image: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0.01, rgb(101,165,227)),color-stop(0.99, rgb(0,78,157)));
/* Chrome v10.0+ and by safari nightly build*/
background-image: -webkit-linear-gradient(-90deg,rgb(101,165,227) 1%,rgb(0,78,157) 99%);
/* Opera v11.10+ */
background-image: -o-linear-gradient(-90deg,rgb(101,165,227) 1%,rgb(0,78,157) 99%);
/* IE v10+ */
background-image: -ms-linear-gradient(-90deg,rgb(101,165,227) 1%,rgb(0,78,157) 99%);
background-image: linear-gradient(-90deg,rgb(101,165,227) 1%,rgb(0,78,157) 99%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff65a5e3,endColorstr=#ff004e9d,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff65a5e3,endColorstr=#ff004e9d,GradientType=0);
line-height: 60px;
height: 60px;

Answer №1

When looking at web examples, you may come across a common usage of the linear-gradient function which typically appears like this:

linear-gradient(bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);

It's worth noting that while using keywords like bottom or top is common in these examples, they are not actually part of the official standard. Instead, you should use degree values such as 0deg, -90deg, etc., or utilize the to prefix with values like to bottom, to top, or to left top:

linear-gradient(to bottom, rgb(73,132,180) 0%, rgb(97,155,203) 100%);
----------------^

Answer №2

Give this method a try, it's straightforward and I hope it proves to be helpful for you. Good luck!

    <div style="background-image: -webkit-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
         background-image: -moz-linear-gradient(bottom, #FE1C4A 22%, #AB244A 61%);
         width: 200px; height: 100px; text-align: center;">
    </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

What is the method for altering the color of the left border on a tab menu?

Check out my website at Hover over the 'URUNLER' section on my website to see the tabbed menus. I'm trying to figure out how to change the red color that appears when a tab is active to blue, but haven't been successful so far. ...

Issue encountered with nth-child selector

I came across the following CSS code snippet: a { display:table; } a:hover { text-decoration:none; } a:first-child { color:#00FF00; /* green */ } a:nth-child(3) { color:#FF0000; /* red */ } <a href="www.google.com">Google&l ...

What steps should I follow to make a sticker adhere to a div?

I'm currently in the process of designing a sticker that attaches to the top of a div, much like this: https://i.sstatic.net/aG329.png <div className="upgrade-premium"> <div className="upgrade-team"> <h1>Prem ...

Retrieve the computed style of a cloned element that has not yet been appended to the document

I am dealing with an HTML page that looks like this: <div id="cloneDiv"> <h1> <a href="">ASUS Vivotab Smart Black Office 2013 H&S ME400C-C2-BK 10.1-Inch 64GB Tablet (Black)</a> </h1> <di ...

Pause the animation when the cursor is hovering over the box, then resume the animation when the cursor moves away

I am working on a project where I have a collection of images that need to be displayed side by side on an html page within a div. The challenge arises when the number of images exceeds the space in the div, causing it to scroll automatically from left to ...

a shadowy see-through veil for division

I'm currently working on adding a dark transparent overlay to the product div whenever someone hovers over the product image. I've successfully created overlays for the entire screen in the past using similar logic, but this time it's behavi ...

Inquiries for Web-Based Applications

As I contemplate coding my very first webapp, I must admit that my skills are somewhere between beginner and intermediate in html, css, js, jquery, node, sql, and mongodb. However, the challenge lies in not knowing how to bring my vision to life. My ulti ...

Tips for aligning content vertically in bootstrap 4

Looking to vertically center content in Bootstrap 4? <div class="container"> <div class="content"> <div class="row"> <div class="col-6 align-middle" ...

Using jQuery to select elements on a webpage

I'm experimenting with Royal Slide and trying to dynamically change the ID based on image changes. I've attempted using translateX values, but it's been challenging for me since I have limited experience with jQuery/JavaScript. However, I ca ...

What is the distance between the different segments in HTML code?

I have the following HTML structure: <body cz-shortcut-listen="true"> <div id="panels"> <section id="sect0" name="lvl0"> <div id="divLvel0" class="level zero"> <h2>top<nav><ul& ...

The custom width is not being applied to the Bootstrap column

I'm working on a Web Design project using Bootstrap. Here is a snippet of my HTML code: <div class="col utility_col"> <div class="row"> <div class="col vote_col">Vote</div> <div class="col sign_col"> < ...

Enhance user experience with JQUERY - MouseEnter, Focus, Hover, and Blur

Here is the current code snippet for showing and hiding a footer banner. Everything seems to be working fine except for an issue with MouseOver functionality. The MouseOver feature works as expected, but when a user clicks within the area, the highlight d ...

The div is repositioned without the use of padding or margin properties

I am facing an issue with my Next.JS application where a div is not aligning properly at the top of the page. Despite setting padding and margin to 0 for body, HTML, and the div itself, it seems to be slightly off. I have checked all components thoroughly ...

Should I use CSS, Bootstrap, or a combination of both for a complicated design in a React app

I am currently developing a react app and utilizing react-bootstrap to incorporate various components. As someone who is new to javascript, react, and web development as a whole, I find it challenging at times. My goal was to create a layout that seemed q ...

What happens when absolute positioning looks for "relative" inside nested divs?

I'm struggling to grasp the concept of nested divs and how they work together. I understand that when you have a "position absolute" element inside a "position relative" element, the former looks for the latter as its reference point. But what happens ...

Transition not influencing the scale property when activating a class

My modal is not scaling in and out properly when I toggle the 'active' class. It either fully scales out or scales in without any transition. Example: const openPopupButtons = document.querySelectorAll('[data-popup-target]'); const ...

Styling code for a layout with two columns aligned to the left using

I am looking to create a layout where two pieces of text are displayed side by side in columns using CSS. The left-hand column will have variable length text, while the right-hand column will have fixed length text. The desired layout should show the two ...

Achieve a straightened appearance for background images within a skewed container

Can I un-skew the content inside a skewed carousel, while preserving the diagonal effect on the slide container? Check out the Jsfiddle example here - https://jsfiddle.net/czcjt3no/1/ <div class="section"> <div class="grid poly--holder"> ...

Openshift is unable to locate the CSS file I uploaded

I successfully created a new app on Openshift and the default template is functioning well. The only customization I made was: <head> ... <link href="styles.css" rel="stylesheet"> </head> and placed a file named styles.css in the same d ...

Enable vertical scrolling within the table body to display entire rows

Encountering an issue with using overflow-y inside tbody. Attempting to set the maximum height of the tbody results in it shrinking into a single column, as shown in image 1. Seeking assistance in resolving this problem. Thank you. Below is the HTML code: ...