CODEWITHSUNDEEP
htmlcssbordergradient
user1279153
user1279153

Reputation: 21

Is there any way to create horizontal gradients with CSS borders?

I'm trying to create an effect where the border of my DIV object has a horizontal left-to-right gradient fade. The perspective of the gradient must encompass all borders (not just top and bottom)

All the documentation I came across so far describes how to do it vertically

Thanks

Upvotes: 1

Views: 5763

Answers (3)

Marko K
Marko K

Reputation: 344

All the other answers have just pointed you to a CSS-generator.

While Colorzilla does a great job at applying vendor-prefixes, the core CSS for it is really simple. Though, I do believe you can get better cross-browser compatibility by using pseudo-elements instead of borders in this scenario. This is how I do it:

Start with a simple div:

<div class="top-gradient-border">
    Lorem ipsum
</div>

Basic CSS:

.top-gradient-border {
    width: 200px;
    height: 30px;
    /*other irrelevant styling in here*/
}

Add the gradiented border (this example shows you how to do it for a border-top, change the pseudo-element for other sides):

.top-gradient-border::before {
    content: "";
    background-image: linear-gradient(to right, white, black);
    height: 1px; /*for horizontal border; width for vertical*/
    display: block;
}

You can learn more about CSS gradients on CSS-Tricks.

Upvotes: 3

dangerChihuahua007
dangerChihuahua007

Reputation: 20925

Colorzilla allows you to produce gradients using CSS - no graphics files involved. It also works reliably across many browsers.

http://www.colorzilla.com/gradient-editor/

Upvotes: 1

David D.
David D.

Reputation: 367

Photoshop

But check this out, it might just do the trick for you (plus its GUI)

Colorzilla

Upvotes: -1

Related Questions