This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 1 year ago.
The community reviewed whether to reopen this question 1 year ago and left it closed:
Needs details or clarity Add details and clarify the problem by editing this post.
This could be extremely easy, but I'm not very familiar with CSS effects, but is it possible to create a background that mimics the gradient of the underlying image?
The background is repeated vertically.
---
The closest I have been able to get is as follows:
body {
background: radial-gradient(ellipse at top right, #0D0934, transparent),
radial-gradient(ellipse at top left, #3A0927, transparent),
radial-gradient(ellipse at bottom left, #0D0934, transparent),
radial-gradient(ellipse at bottom right, #3A0927, transparent);
}
P.S. The visualization seems buggy in this code snippet
body{ background: radial-gradient(red, blue); }
Related
This question already has answers here:
Create a responsive receipt cutoff in css
(1 answer)
Making jagged triangle border in CSS
(5 answers)
Closed 24 days ago.
I am trying to create in CSS a border pattern to apply on the top and bottom of my content. It should look like this (the teeth should be black):
+--------------------+
|\/\/\/\/\/\/\/\/\/\/|
| |
| the actual |
| content |
|/\/\/\/\/\/\/\/\/\/\|
---------------------+
I am trying to make the teeth black and the rest of the border area transparent.
My main idea is to work with background-image and linear-gradient.
I have managed to draw the left half of a black tooth with:
linear-gradient(45deg, white 0 50%, black 50% 100%)
... and the right half with:
linear-gradient(135deg, black 0 50%, white 50% 100%)
The plan is the to put the two halves side-by-side and then simply use background-repeat: repeat-x to paint as many teeth as are necessary for the width. That would allow me to do the top row of the teeth and then I would do the bottom row in a similar manner.
The plan fails because I cannot stack the two parts of the tooth horizontally, side by side.
Online playground is here. Can you help me finish the top row of teeth?
This question already has an answer here:
Footer consisting of two right triangles
(1 answer)
Closed 1 year ago.
I'm trying to create a footer for a site that has this split color design, where's there's two triangles almost overlapping one another. Any ideas would be greatly appreciated!
Thanks!
I attempted something like this:
background: linear-gradient(120deg, #ba5459 48%, #97444c 48%);
Its not overlapping triangles its a special CSS property called clip-path which is used to clip the rectangular div into various shapes.
Create a div first and then in CSS paste the following property. Play with the values to understand its behavior.
clip-path: polygon(0 24%, 100% 0%, 100% 99%, 0% 100%);
You can learn more about clip path over there.
This question already has answers here:
Can I create a div with a Curved bottom?
(5 answers)
How to curve the div from bottom with image background
(7 answers)
curved div with transparent top
(3 answers)
Closed 2 years ago.
I'm trying to make my background image bottom border to be curved like the image below. How do I make it using clip-path?
here is what I want
I found solution, maybe it would help someone in future
clip-path: ellipse(100% 55% at 48% 44%);
I'm looking for a glass effect with a linear-gradient like in . I've tried several effect and the one that most resembles is:
background: linear-gradient(#1f87ab, #004961 50%, #004961 90%);
I've also looked at:
Creating a Two-Color Sharp Gradient on Text With CSS3
Horizontal sharp background gradient with specific length of first color
But they didn't help
I solved using
linear-gradient(#2396bf, #0d5b77 40%, #004961 3%, #004961);
And it even looks a little bit better
I have a school project where i need to make a exact copy of a website.
The background is a bit tricky because i need to (what i think) add a radial ellipse but then with no sides or bottom, only the top.
when i try to make a ellipse i get a oval which covers all four sides (obviously) but i dont know hot to apply it to the top only.
can anyone help me out?
this is what is is supposed to look like
PLease pay attention to the background only
I already tried a ellipse and a normal radial gradient but i does not function how i want it to be.
this is the code i have
background-image: radial-gradient(ellipse, white, lightgrey, lightgrey,
#1b1b2e
#1b1b2e);
adjust your code like below:
html {
min-height:100%;
background-image: radial-gradient(150% 150% at bottom center, white, lightgrey, #1b1b2e, #1b1b2e);
}