Claromentis Design

Gradients

Linear Gradients

Linear gradients are provided with easing in order to avoid hard edges and/or banding when rendered in a browser.

Vivid violet

Linear gradient from #A445B2 to #E70A63

background-image: linear-gradient(45deg, #A445B2 0%, #A644B1 9%, #AB41AE 17%, #B13EAA 25%, #B939A5 32%, #C1339F 38%, #C82D98 44%, #D02590 50%, #D61E87 56%, #DB177F 62%, #E01177 68%, #E30C6F 75%, #E50A69 83%, #E60A65 91%, #E70A63 100%);

Live preview

function VividVioletGradient() {
  return  <div style={{backgroundImage: 'linear-gradient(45deg, #A445B2 0%, #A644B1 9%, #AB41AE 17%, #B13EAA 25%, #B939A5 32%, #C1339F 38%, #C82D98 44%, #D02590 50%, #D61E87 56%, #DB177F 62%, #E01177 68%, #E30C6F 75%, #E50A69 83%, #E60A65 91%, #E70A63 100%)', width: '100%', height: '100px'}} />;
}

render(<VividVioletGradient />);

function VividVioletGradient() {
  return  <div style={{backgroundImage: 'linear-gradient(45deg, #A445B2 0%, #A644B1 9%, #AB41AE 17%, #B13EAA 25%, #B939A5 32%, #C1339F 38%, #C82D98 44%, #D02590 50%, #D61E87 56%, #DB177F 62%, #E01177 68%, #E30C6F 75%, #E50A69 83%, #E60A65 91%, #E70A63 100%)', width: '100%', height: '100px'}} />;
}

render(<VividVioletGradient />);

Blue

Linear gradient from #51BDF8 to #4F83E4

background-image: linear-gradient(221deg, #51BDF8 0%, #50BCF8 9%, #4DB9F7 17%, #4AB6F7 25%, #46B2F6 32%, #43ADF5 38%, #41A7F3 44%, #41A1F1 50%, #419BEF 56%, #4396ED 62%, #4690EB 68%, #498BE8 75%, #4C87E6 83%, #4E84E5 91%, #4F83E4 100%);

Live preview

function BlueGradient() {
  return  <div style={{backgroundImage: 'linear-gradient(221deg, #51BDF8 0%, #50BCF8 9%, #4DB9F7 17%, #4AB6F7 25%, #46B2F6 32%, #43ADF5 38%, #41A7F3 44%, #41A1F1 50%, #419BEF 56%, #4396ED 62%, #4690EB 68%, #498BE8 75%, #4C87E6 83%, #4E84E5 91%, #4F83E4 100%)', width: '100%', height: '100px'}} />;
}

render(<BlueGradient />);

function BlueGradient() {
  return  <div style={{backgroundImage: 'linear-gradient(221deg, #51BDF8 0%, #50BCF8 9%, #4DB9F7 17%, #4AB6F7 25%, #46B2F6 32%, #43ADF5 38%, #41A7F3 44%, #41A1F1 50%, #419BEF 56%, #4396ED 62%, #4690EB 68%, #498BE8 75%, #4C87E6 83%, #4E84E5 91%, #4F83E4 100%)', width: '100%', height: '100px'}} />;
}

render(<BlueGradient />);

Pre-rendered Gradients

We use several pre-rendered gradients that are provided as bitmap images. These are square, but can be stretched, resized and cropped as needed.

Mesh Gradients

Mesh gradients use a 3D mesh and Hermite bicubic color interpolation to generate abstract gradient patterns.

Blue-magenta Mesh

Used for main Claromentis branding.

gradient-prerendered-blue-magenta

Light Mesh

Used for page backgrounds & graphic assets.

Image opacity may be adjusted between 40% - 100% to aid contrast

gradient-prerendered-light

Claromentis Design

Gradients

Gradients

Linear Gradients

Vivid violet

Blue

Pre-rendered Gradients

Mesh Gradients

Blue-magenta Mesh

Light Mesh

🗣 Tone & Voice

🔄 Agencies

On this page