A quick example of layering different background gradients to simulate a gradient mesh. for https://graphicdesign.stackexchange.com/questions/105403/svg-gradient-implementation
A Pen by Pieter Biesemans on CodePen.
Created
June 30, 2023 14:25
-
-
Save maxludden/d1d5388ed4db988b9d69590ca3d98782 to your computer and use it in GitHub Desktop.
Layering background gradients
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- The gradient backgrounds are applied to the body --> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| This Codepen is in the Public Domain. | |
| You can use it for whatever purpose you like, except evil. | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin horizontalcenter(){ | |
| left: 50%; | |
| transform: translatex(-50%); | |
| } | |
| @mixin verticalcenter(){ | |
| top: 50%; | |
| transform: translatey(-50%); | |
| } | |
| @mixin centercenter(){ | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| div{ | |
| position: absolute; | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| overflow: hidden; | |
| &:before, &:after{ | |
| content: ''; | |
| position: absolute; | |
| display: block; | |
| box-sizing: border-box; | |
| } | |
| } | |
| /* | |
| * BACKGROUNDS | |
| * | |
| * A list of layers on the background to keep track of which is which. | |
| * The first background is always on top. | |
| * | |
| * 1. white center cirlce | |
| * 2. green circle at center right | |
| * 3. blue bottom left | |
| * 4. purple bottom right | |
| * 5. purple - pink- orange background | |
| * | |
| */ | |
| body{ | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| margin: 0; | |
| padding: 0; | |
| background: | |
| /*1*/ radial-gradient(ellipse at center, rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 100%), | |
| /*2*/ radial-gradient(ellipse at 70% 60%, rgba(195,224,96,1) 0%,rgba(195,224,96,0) 30%), | |
| /*3*/ radial-gradient(ellipse at bottom left, rgba(0,163,203,1) 0%, rgba(0,163,203,0) 70%), | |
| /*4*/ linear-gradient(135deg, rgba(18,46,119,0) 0%,rgba(18,46,119,0) 75%,rgba(18,46,119,1) 100%), | |
| /*5*/ linear-gradient(to right, rgba(98,87,147,1) 0%, rgba(213,93,100,1) 17%, rgba(228,145,41,1) 74%, rgba(192,103,28,1) 100%); | |
| background-blend-mode: | |
| /*1*/ screen, | |
| /*2*/ hue, | |
| /*3*/ color, | |
| /*4*/ overlay, | |
| /*5*/ normal; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
SCSS