Are there any CSS background-color sophistications which are not gradient?

HTML & CSS
1

Giving just one color as a background to an element can often feel a bit “bland” and we may want to make the background slightly more sophisticated.
The natual approach to this was to always combine two colors in some gradient for one of them or combining several colors in several gradients.
But is there anything else besides gradients?

What if for example I would like to decorate the background color with some simple Grey grid?

I am not familiar with graphic design terminology, please share your free thoughts on this.

1 Like
2

There are many websites giving CSS backgrounds: some examples here:

You also have the option of using SVG backgrounds: examples here:

2 Likes
3

Here’s a few more :slight_smile:

And a few of my old demos:


https://codepen.io/paulobrien/pen/KKmxZaG

https://codepen.io/paulobrien/pen/XWNyyJd

1 Like
4

Exploring beyond gradients, incorporating subtle elements like a grey grid can add a touch of sophistication to a single-colored background, offering a visually engaging alternative in graphic design. It’s about experimenting with creative nuances beyond traditional techniques to enhance the overall aesthetic appeal.

5

From a quick check of the examples given here, they do include gradient or SVG, things I try to avoid.

What else is there for a single color background without gradients and SVGs at all?

6

That doesn’t make sense:).

If it’s a single color then that’s a background color. If it’s more than one color then that’s basically a gradient.

As you see from the examples the possibilities are almost endless.

Perhaps if you can show exactly what you need then we can tailor the examples to suit.

Well that’s exactly what a gradient can do for you. There were plenty examples of this above. :slight_smile:

Or this:

1 Like
7

I understand why you said it doesn’t make any sense.

What I probably meant to say was that I think that the term “gradient” is “overused”.

Perhaps if there was a command like in the following pseudocode, I wouldn’t publish this post :slight_smile:

#sidebar {
    background-color: grey;
    background-color-on-top-1-shape: grid;
    background-color-on-top-1-color: black;
}

1 here is the “layer” similar to z-index but much simpler (no more than 5 layers).

8

Lol it still doesn’t make sense :slight_smile:

If I have a red background and then I put a black background on top then it’s just a black background. :slight_smile:

You can’t put one solid background on another and show both unless you have opacity on both.

The gradient example I have shown does what I think you are asking so I don’t see why you are avoiding it? It’s pretty straight forward.

9

I think I misphrased the pseudocode; here is a better example what to I orignally meant:

#sidebar {
    background-color: grey;
    background-shaping-type: grid;
    background-shaping-size: 1px
    background-shaping-color: black;
}

So we’ll get a Grey background with a Black grid.

I didn’t mean a solid color on a solid color :slight_smile:

1 Like
10

Yes I understand.

Your pseudo code may indeed sound simpler but would have no mechanisms for setting the size of the grid or for changing the shape or its thickness or it’s transparency or it’s orientation etc. Are you going to add all those as well. It’s quite easy to say “I only want this one thing” but realistically you would need to define a whole new spec for this.

The gradient syntax already has that all build in and so much more which is why I don’t understand the hesitancy. I’ll admit the more complicated gradients can be awkward to build but your grid effect in my last demo was very simple.

The bottom line is that you already have the tools to do what you want :wink:

11

I just find the gradient/s method too broad from a pedagogic/didactic standpoint. I willl use it, of course, but I only tried to find out if there is something more specific.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.