establishing gradient percentages through HTML

I am looking to design div containers with a linear gradient background, each with different percentage color values.

I currently have a solution that successfully creates these div containers in a loop:

.box {
  width: 500px;
  height: 200px;
}
<!-- The percentage values are just variables! -->
<div style="background-image: linear-gradient(blue 0%, red 20%)" class="box">
</div>

Is it possible to create a CSS class for the gradient and set the percentage values directly through HTML code?

Pseudo Code

.box {
  width: 500px;
  height: 200px;
}

.gradient{
  /* no colors provided! */
  background-image: linear-gradient(blue, red) 
}
<!-- The percentage values are just variables! -->
<div style="gradientValues: [0%, 20%]" class="box gradient">
</div>

I simply need to adjust the values of the gradient while keeping the color fixed. However, I prefer not to use JavaScript since I generate these divs from ColdFusion code. Instead, I aim to refactor the gradient color into a CSS class rather than specifying it inline as 

style="background-image: linear-gradient(blue VAL1, red VAL2)"

within my HTML markup.

htmlcss

Answer №1

Affirmative

Utilizing the power of CSS Custom Properties (also known as CSS Variables)

:root {
  --var1: 0;
  --var2: 50%;
}

div {
  height: 100px;
  margin-bottom: 1em;
  background-image: linear-gradient(to right, blue var(--var1), red var(--var2));
}
<div></div>

<div style="--var1:50%; --var2:50%;"></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

Is it advisable to utilize $_GET for dynamically loading HTML content?

Currently, I am in the process of developing a social networking platform using PHP, MySQL(PDO), JQuery, and HTML(CSS). My focus at this moment is on the profile page where I want to distinguish whether the user is viewing their own profile or someone else ...

phpjqueryhtmlcssmysql

Selecting multiple objects in FabricJS on mouse click

Can anyone provide suggestions on how to select multiple objects on a canvas with a mouse click? I only want to select objects that overlay the point. From my understanding, the target of the mouse event is always the top-most object. I have tried binding ...

javascripthtmlcanvasfabricjs

Utilize ng-checked in AngularJS to bind all values from an array to checkboxes

I'm working on a project where I need to bind the name and age of a person using checkboxes, with the data looped through ng-repeat. However, I seem to be able to only get the "name" from the array, not the "age". Can someone please help me find my mi ...

javascripthtmlangularjsangularjs-scope

Modifying multiple heading tags simultaneously with jQuery

Currently utilizing jQuery to append a string to all heading tags (h1, h2,..., h6) and display it on the screen. Seeking guidance specifically for the replacing aspect, and open to solutions using plain javascript as well. The code I have so far, which I ...

javascriptphphtmljqueryjson

Adjusting the spacing around the title of a post when the text wraps

This website has some great resources, check it out! In the right sidebar, there seems to be an issue with the CSS when the h4 heading wraps onto two lines. The margin and padding at the bottom of the heading are not spacing properly. I've tried adju ...

csstitleword-wrap

What could be causing my elements to shift out of place?

Here is the box I created: BOX Now, I want to position another box near the input of the BET box. <div id="x2"></div> <!-- HTML ---> /* CSS */ #x2{ width: 40px; height: 40px; background: cornflowerblue; } The layout after ...

htmlcss

Issue with Firefox: Click event not fired when resize:vertical is set while focusing

Issue: Firefox is not registering the first click event when a textarea has the following CSS: textarea:focus { resize: vertical; } Check out the demo: http://jsbin.com/wuxomaneba/edit?html,css,output The fix for this problem is straightforward - ju ...

javascriptcssfirefox

Closing a Bootstrap 4 accordion that is dynamically generated within a table when another accordion is opened

Currently, I am utilizing bootstrap-4 to create accordions within a table. Whenever clicking on the image, another tr element is appended which triggers the opening of the accordion. Furthermore, within each accordion, I am adding another tr element, essen ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-4

Prevent scrolling on Bootstrap columns

My webpage is built with Bootstrap and I have a layout with 4 columns on the left and 6 on the right. I want to prevent the 4 columns on the left from scrolling. How can I achieve this? I am aware of the option to use class="affix" on the left column, b ...

htmlcsstwitter-bootstrap

What impact does reducing the window size have on my header?

While working on a website with a navigation bar, I encountered an issue where the navbar was not responsive. When the window size was reduced, the nav bar shifted to an awkward position vertically, as shown in the first image. The navbar shifts below the ...

htmlcssdom

Tips on obtaining the element selector when a div is being dynamically loaded during an AJAX call

When running two ajax calls, I encounter an issue where the second call loads some HTML onto the page that is needed for processing a specific div in the first call. However, since the div is not present until after the second call is completed, I receiv ...

javascriptjqueryhtmlajax

Customize button design with data from API request

I am currently working on a project to showcase the status of multiple servers within a cluster. To achieve this, I have established a status route in my web service that returns 'ok' if the server is functioning correctly and an error message if ...

jqueryhtmlcss

Is it possible to align a CSS table row with its corresponding table header even when the table row is deeply nested within the table structure?

I am looking to keep the structure of my HTML code consistent and unaltered. However, this has resulted in a form tag being nested inside a table row before the table cells can begin. The information I need to display is tabulated data, which makes CSS t ...

htmlcss

viewing the Jenkins HTML report

I am currently working on a Jenkins job that utilizes the HTML publisher plugin to run selenium automation tests and produces a link to a HTML test result report on the Jenkins job details page. I am seeking a way to share this HTML report link with stak ...

htmlseleniumjenkinsplugins

Styling a list within a div using CSS

I have a CSS file that looks like this: .h_bg{ height:100%; background-size:auto 100%; background-position:center center; background-repeat:no-repeat; position:relative; } .h_bg h1{ width: 100%; position:absolute; line-heig ...

htmlcss

I require the ability to access a reference parameter with a dynamically changing name within a Vue template

<div v-for="x in 4" :class="(images[x] === null) ? 'not-removable' : 'removable'" class="img-container"> <input style="display: none" type="file" ...

javascripthtmlvue.js

Achieve a Smooth Transition: Utilizing Bootstrap 3 to Create an Alert Box that Fades In upon Click and Fades Out

Incorporating AngularJS and Bootstrap 3 into my web app, there is an "Update" button that saves user changes. Upon clicking the "Update" button, I aim to trigger and display bootstrap's alert box with the message "Information has been saved," followed ...

javascriptjquerycssangularjstwitter-bootstrap

Adjust the transparency of a separate image within a different container by hovering over another image container

Is my goal too complex to achieve? I am attempting to create a hover effect where the opacity of artwork1 and button1 changes simultaneously when hovered over. However, I am having trouble properly labeling my elements and getting them to interact as inten ...

javascriptjquerycsshover

Why is my DIV not registering clicks when I try to interact with it?

Trying to implement a Javascript click event <script type="text/javascript"> $(document).ready(function () { $(".role").click(function () { alert("idiot"); }); }); </script> Here is the CSS code for styling the DIV with clas ...

jqueryfunctionhtml

The window.open function is returning a null value after attempting to open the specified

Is there a way to prevent users from opening more than one IFrame window for my application? I have included the following code: <html> <head> <title>Testing Window Opening Limitation</title> <meta http-equiv="Content-Type" cont ...

javascriptjqueryhtml