100 questions
- Bountied 0
- Unanswered
- Frequent
- Score
- Trending
- Week
- Month
- Unanswered (my tags)
0
votes
3
answers
66
views
Is there a way to stack a pseudo-element *behind* its <p> parent's text gradient fill?
Here is my snippet.
The <p> is the text "Cool CDs", which appears as a gradient-filled text (with the use of background-clip:text).
p::before is a slightly shifted-down stroke that I ...
1
vote
1
answer
64
views
Rounded borders that look like the image attached
I don't have a clue how to create these 3d looking borders. The borders have a green gradient going into transparent. The green used is #2CA05A. The border-radius is 30px.
This is what I have:
.new-...
0
votes
1
answer
47
views
Setting linear-gradient offset as percentage without background-size
This looks simple and must be asked before, but I cannot find the question.
I have the following animation:
@keyframes bar-animation
{
to
{
background-position-y: 20px;
}
}
....
-1
votes
1
answer
88
views
CSS Gradient Smooth on Shape
I have been trying to make this
effect using css, but i kind of stuck, i can't figure it out how to make the color of gradient look smooth. it's possible to do ?
so far this what i got
.bg-...
0
votes
1
answer
114
views
CSS Gradient Animation Not Working in Svelte Component
I'm working on a Svelte component where I want to create a shiny call-to-action button with gradient animations. The button should have a combination of linear and conic gradients that animate over ...
0
votes
2
answers
1k
views
How to recreate this circular gradient in CSS from a Figma design?
I'm trying to recreate a circular gradient in CSS that matches the one I designed in Figma. Here's the image for reference:
Circle Gradient
The gradient I have in Figma is defined as:
background: ...
1
vote
0
answers
47
views
Gradient background transitioning animations not working with react-router
I am working on a hobby project.
I have a gradient background, and trying to create an animation whenever I switch between routes. For example, if I have background-color: linear-gradient(green, red) ...
0
votes
2
answers
293
views
CSS HSL-Triangle
I try to build a website with a color picker.
For that, I would like to use some sort of semicircle with which you can choose the hue and a triangle with which you can choose the saturation and ...
0
votes
1
answer
81
views
How to fade right side of an element on small screens?
I've a web page with three tabs. I want the last tab to fade partially on it's right when screen size is <= 640px. My SCSS was doing that, but the styles aren't applying after moving folders. Right ...
0
votes
1
answer
565
views
Is it possible to convert Blurhash string to CSS gradients?
I'm currently interested in Blurhash, which can be used as user-friendly placeholder for image loading, to convert the given hash into a set of CSS gradient background, so I may use it as a ...
-3
votes
1
answer
91
views
How to turn a background image effect to CSS
I'm trying to achieve the two effects you see below in CSS, but I can't find how to do them.
Does anyone know the name of this CSS effect or how to achieve something similar with pure CSS?
0
votes
1
answer
53
views
What should I do so that the gradient coordinates do not change when the screen size is changed?
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.sky{
width: 100%;
height: 400px;
background-color: rgb(92, 217, 255);
background-image: radial-gradient(circle at 46.5% ...
1
vote
2
answers
754
views
Scrollable gradient chat bubbles
I want a white container with chat bubbles masked to a gradient that when scrolled will change with the gradient below, as seen in this example:
I've tried making the part of .container that is ...
0
votes
0
answers
23
views
Overwriting css variables in selector scope does not update gradient angle [duplicate]
:root {
--color-primary: #1999CC;
--gr-deg-x: 270deg;
--gr-primary-fade-x: linear-gradient(var(--gr-deg-x), var(--color-primary) 0%, rgba(0, 0, 0, 0) 50%);
}
.myselector {
--gr-deg-x: ...
3
votes
0
answers
328
views
Blending for CSS gradients behaves unexpectedly
I'm creating a CSS linear gradient with color-hints and I want to create an effect to blend from one color to the background color on one side, and then do the opposite to blend back on the other side....