Creating a vertical gradient that repeats horizontally using CSS

Looking for a creative solution using only CSS to achieve a specific background pattern.

I envision a gradient that stretches horizontally and repeats vertically with gaps in between each repetition. Here's an example:

https://i.sstatic.net/7DLf1.png
(source: howsfamily.net)

While it's easy to create the horizontal effect like this:

background: linear-gradient(to left, white, red, white); background-size: 100% 50px; background-repeat: no-repeat; }

And the vertical effect (minus the horizontal gradient) like this:

background: linear-gradient(to bottom, red 0px, red 50px, transparent 50px, transparent 100%); background-size: 100% 150px; background-repeat: repeat-y;

Does anyone have any ideas on how to combine both elements into one seamless design?

cssgradient

Answer №1

Building on the previous comment:

If you're already utilizing linear-gradient, consider incorporating an SVG for more flexibility and enhanced compatibility.

For instance, check out this example:

Take a look at the beautified SVG used in the code snippet below:

<?xml version="1.0"?>
<svg width="20" height="200" viewBox="0 0 20 200" preserveAspectRatio="xMidYMax meet" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="gradient">
            <stop offset="0%" stop-color="blue" />
            <stop offset="50%" stop-color="green" />
            <stop offset="100%" stop-color="blue" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="20" height="100" fill="url(#gradient)" />
</svg>

You have the flexibility to adjust the height and viewBox attributes within the SVG markup as well as the background-size property in your CSS to suit your requirements.

The use of the preserveAspectRatio attribute is crucial to ensure proper stretching of the background image.

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

Create a responsive layout with divs using Bootstrap

As an aspiring Bootstrap and Ruby on Rails developer, I am in need of an adaptable "div" element. Here is my current code snippet: <div class="container-fluid"> <div class="row-fluid"> [if true] <div class="span2"> div1 ...

csstwitter-bootstrap

I am experiencing issues with the HTML footer not displaying correctly on my website

My GitHub Pages hosted website is giving me trouble with the footer styling. No matter what I try, I can't seem to get the background color to show up: h1 { background-color: #000000; } I'm attempting to create a footer similar to the one at ...

htmlcss

Tips for customizing the event target appearance in Angular 2?

After following the steps outlined in this particular blog post (section 3, event binding), I successfully added an event listener to my component class. I can confirm that it responds when the mouse enters and exits. <p class="title" (mouseenter)="unf ...

javascriptcssangularevents

Each container has its own div counter

Help needed to complete this code. The task is to count the number of .resp-containers in each container separately. Then, based on that count, assign a corresponding class to each element within the containers. Check out the code here $(document).ready(f ...

javascriptjqueryhtmlcss

Angular Material's Expansion Panel Alignment

I am currently facing an issue with aligning the icon to the left side of the expansion panel and centering the title. I've tried using CSS with text-align but it's not working as expected. Any advice or suggestions would be greatly appreciated, ...

cssangularangular-materialangular13

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

javascripthtmlcsssass

Floating container leads to delays

My goal is to create a div that changes when I hover over it. However, when I move my mouse into the div, there seems to be some lagging and the content does not appear clearly. Below is the HTML and CSS code I have used: .unshow-txt:hover, .unshow-txt: ...

htmlcss

Dynamic stylesheet in Vue component

Currently, I am utilizing a Vue component (cli .vue) and facing the challenge of selectively displaying my stylesheet based on a boolean value. To put it simply: When myVar==false, the component should not load its styles. <style v-if="myVar" lang="sc ...

javascriptcssvue.jsvuejs2vue-component

Resetting several sticky titles after displaying and hiding elements

Inspired by a popular codepen example, I have successfully implemented sticky titles in my sidebar. However, when integrating these sticky titles with the functionality to show/hide related items on click, I encountered some unexpected issues. The code sni ...

javascriptjqueryhtmlcsssticky

Achieving a seamless integration of a navbar and video in Bootstrap 5.3: tips and tricks

I'm updating a website design using Bootstrap and I want to create a navbar with a video playing in the background. To ensure that the navbar stays fixed at the top while scrolling, I made it sticky. After testing various methods, I managed to posit ...

htmlcssbootstrap-5

Present Images and Text Alongside Each Other in a Grid Layout

My goal is to have an image and text displayed side by side, but for some reason they are appearing stacked on top of each other. https://i.stack.imgur.com/F8OXL.png If you want to take a look at the code I am using, here is the link to my CodePen: https: ...

htmlcss

Display HTML element within the <samp> tag using PHP

I'm using Bootstrap for my form control, but my input and button are not on the same line. <div class="form-group"> <label class="col-lg-3 control-label" id="title-meaning">Meaning:</label> <div c ...

phphtmlcsstwitter-bootstrap

The styles applied to the Angular 5 Component host element are not being reflected correctly in jsPlumb

As a beginner in Angular >2 development, I am excited to build my first application from scratch. One of the features I'm trying to implement is drawing flow charts using jsPlumb. However, I have encountered an issue where the connectors are not be ...

javascriptcssangularjsplumb

I'm interested in learning the best way to insert the images from this JSON file into the corresponding div elements

I have completed developing a clone of an Instagram web page. Although I can retrieve data from the JSON file and insert it into the <img> tag, I am facing difficulty in displaying each image above its respective .below-image div with consistent spac ...

javascriptjqueryhtmlcssjson

What is the best way to align the <text> element within an SVG's parent <g> element?

I'm currently developing a booking tool that requires users to choose a desk on the map by clicking on it. Each desk is enclosed in its own group (<g>) with specific elements like <title>, <path>, and <text>. The issue I' ...

htmlcsssvg

Reduce the file size of CSS and JS files for Magento

We are facing an issue with minifying CSS and Javascript for our Magento website. Currently, the size of our website is 1.1 MB and we aim to reduce it to 1 MB or even lower if possible. I tried using the "CSS Settings" and "Javascript Settings" functions ...

javascriptcssmagento-1.9minify

Displaying text on hover and showing a text box when a link is clicked using CSS and JavaScript

Hovering over the text will display "Edit," and clicking on it will reveal a text box. This function will be used to update content using ajax. HTML: <table> <thead> <tr> <th> Name </th> <th> Age </th> ...

javascripthtmlcssshow-hide

Steps to update the bootstrap version in an existing project

My current project was built using Bootstrap 3.3.6 classes, but now I want to take advantage of the features offered by Bootstrap 5.2. However, simply changing the version of Bootstrap isn't as easy as it sounds. What is the most effective way to upgr ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-5upgrade

How can I remove the color of a button in jquery after it's been clicked?

<button style="background-color:lightblue" id="extractv"> <b> Extract<br>v </b> </button> ... $("#extractv").click(function () { $("#extractv").removeAttr("style"); }); Upon clicking the button, my ...

jqueryhtmlcssbuttoncgi

Tips for encapsulating an image generated using execCommand

<input type="button" onclick="document.execCommand('insertimage',null,'http://barwoncopiers.com/wp-content/uploads/2011/03/linkedin-icon-45x45.jpg');" value="Img"/> <br> <div contenteditable="true" class="editor" id="edit ...

javascriptjqueryhtmlcssexeccommand