Shades of color in a Bootstrap gradient palette consisting of 4

I have experimented with 4 different colors to achieve a unique CSS gradient effect. The code I used looks like this:

background: linear-gradient(to right, #ffffff 0%,#ffffff 72%,#929292 72%,#929292 100%);

Currently, I am working with Bootstrap. My dilemma lies in figuring out how to integrate this complex gradient into my LESS file.

If the gradient consists of only 2 or 3 colors, I can easily utilize Bootstrap mixin functions as shown below:

#gradient.vertical(#ffffff; #f9f9f9 );
#gradient.vertical-three-colors(#ffffff; #f9f9f9; 72%; #e7eaef);

However, once the gradient consists of more than 3 colors, I am unsure of the approach to take.

I am hopeful that someone will be able to provide guidance on this matter.

Thank you for your assistance.

csstwitter-bootstraplinear-gradients

Answer №1

Create your own custom four-way gradient mixin and insert it into the bootstrap/less/mixins/gradients.less file.

For example:

.custom-four-gradient(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 33%; @mid-color-2: #abcdef; @color-stop-2: 66%; @end-color: #c3325f) {
    background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2, @end-color);
    background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2,@end-color);
    background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @mid-color-2 @color-stop-2, @end-color);
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and older, without color stops for fallback
}

Then use it like this:

#gradient.custom-four-gradient(#ffffff; #f9f9f9; 33%; #bbb, 66%, #e7eaef);

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

My attempts to decrease the volume of an HTML5/CSS3 Audio element have been unsuccessful

Hey there! I'm currently working on my very first webpage and recently added an audio element that is functioning perfectly. The only issue I'm encountering is trying to position the element at the bottom of my page. I've already attempted ...

csshtml

Style the modal body to display as a block on both desktop and mobile devices using CSS

My goal is to ensure that the modal-body is vertically aligned for optimal visibility on both mobile phones and PCs. I am utilizing bootstrap for this purpose. <div class="modal-body" style="display: inline-block;"> <div> ...

htmlcssbootstrap-5

Ways to broaden the map of a variable in SCSS

Currently, I am utilizing a package known as Buefy, which acts as a Vue.js wrapper for the Bulma CSS framework library. Within Buefy's template components, there is an attribute/property called type (e.g., type="is-warning"). According to the document ...

cssvue.jssassbulmabuefy

Position an element in CSS relative to two other elements

Can an element be positioned horizontally in relation to one element and vertically to another using only CSS? I am attempting to include a dropdown menu in my navbar. However, the submenu is not aligning correctly. I want to position element A so that its ...

htmlcss

Clearing Up CSS Height Definitions

Based on my observations from other posts, it seems that to establish the height of an element in percentages or pixels, etc., the parent element's height also needs to be explicitly defined. This implies that the height settings must be specified all ...

htmlcssheight

concerning online shopping cart platform

Hello everyone, I am having an issue with my basket. Can someone provide me with the source code to add items to the cart? I have three additional products named Royal, Splroyal, and Postal with values of $22, $45, and $90 respectively stored in radio butt ...

phpjqueryhtmlcssajax

Leveraging calc() in Material UI

Goal: The aim is to design two divs positioned side by side on a webpage, covering the entire width of the page. This should be achieved using the latest versions of react + Material UI. The div on the left should have a fixed width of 200px. While the ...

cssreactjsmaterial-ui

The font-face declaration is not in accordance with the correct syntax outlined by fontspring, generating an error

I've been attempting to change my font using the font-face rule, but it's not working. Every time I try, it displays an error saying "@font-face declaration doesn't follow the fontspring bulletproof syntax". I've searched online for a s ...

htmlcssfont-face

Adjust the size of various elements in real-time

I am currently working on a script that adjusts the size of filtering-inputs based on the width of gridview columns. Initially, it only involved textboxes, and I managed to make it work adequately: Script Snippet: $("#<%= myGridView.ClientID %> th" ...

jqueryasp.netcssgridviewdynamic-sizing

Is there a way for me to choose all the classNames that conclude with a specific word within the MUI sx property?

I am currently working with MUI and I have a need to modify certain properties that are prefixed with random IDs. How can I target, for instance, the first one using: '& endsWith(MuiAccordionDetails-root)' I wish to achieve this because the ...

javascriptcssreactjsmaterial-ui

What are the best ways to create a responsive grid layout?

I've recently constructed a website but I'm struggling to make the tiled layout responsive. As a novice in web development, I'm unsure of how to proceed with making my site adaptable across different devices. Any guidance or assistance on th ...

csshtmlresponsive-designgriddreamweaver

How can you assign a div ID to an image with a backlink included?

I need assistance in centering an image with a back link inside a div id, positioned 850px to the left. Additionally, I require another Div Id containing text centered on the same line within that same 850px space. Below is my CSS: #container3 > div { ...

csshtml

I need help with importing CSS in Vue.js

When working with the Vue package, I have a need to import a CSS file directly into the index.html file. Currently, the 'index.html' file mounts #app > 'App.vue', which then mounts Todo.vue using the router. Any assistance on how t ...

cssvue.jsimportrouter

Implement a menu that can be scrolled through, but disable the ability to scroll on the body of the website

When viewed on a small screen, my website transforms its menu into a hamburger button. Clicking the button toggles a sidebar displaying a stacked version of the menu on top of the normal website (position: fixed; z-index: 5;). This sidebar also triggers a ...

javascriptjqueryhtmlcssiphone

Reduce opacity of div upon clicking javascript:history.back()

I have successfully implemented a fadeIn CSS animation, but I am facing an issue where the block disappears abruptly when I click the close button. Is there a way to reverse the animation when the user clicks the "close" link (which triggers javascript:his ...

htmlcssfadein

adjust bootstrap column width to fill the container

https://i.stack.imgur.com/tCuL6.png I am hoping that this image will provide a visual aid for what I am trying to convey. My goal is to have the arrow and the boxes aligned in a row without any empty space on the right side. As you can see, the leftmost b ...

htmlcsstwitter-bootstrap

Lack of activation on initial load of the first content div due to the presence of tabs between

I am trying to create a navigation system for two divs using tabs: Year 1 and Year 2. The navigation is working correctly, but when the page first loads, neither div is active. I want the "first" div to be displayed by default on page load. How can I ensur ...

javascriptjqueryhtmlcss

How to Create a Flipping Bootstrap 4 Card with Hover Effect

I am currently in the process of creating a Bootstrap 4 and HTML5 dashboard. My goal is to have each card on display flip to reveal additional information when the 'i' button is hovered over. Although I have managed to get the flipping animation ...

jqueryhtmlcssbootstrap-4

Tips for aligning a title to the bottom when its length varies

I am facing a design challenge where I need to align a header with content in a different column. The header's length can vary, so I need to figure out how to align the border-bottom consistently. (The code snippet below is just for illustration pur ...

htmlcss

Title: How to Build a Dynamic Logo Carousel with React and CSS without External Dependencies

Currently, I am in the process of integrating a logo carousel into my React web application using CSS. My goal is to create a slider that loops infinitely, with the last logo seamlessly transitioning to the first logo and continuing this cycle indefinitely ...

cssreactjstypescriptsliderinfinity