CSS Backgrounds
Some examples of using CSS and C# Razor to create colourful backgrounds — some dynamically and some statically. See in line code examples and feel free to use in your own projects.
Lilac circles
Refresh the page to see new patterns here
Random circles
Refresh the page to see new patterns here
<div style="border-radius: 5px; box-shadow: 0px 6px 20px #ccc; margin-top: 20px; margin-bottom: 20px;">
<div style="border-radius: 5px; padding-top: 100px; padding-bottom: 100px; background-color: #A6F5ED; overflow: hidden; position: relative">
<div style="height: 0%; width: 100%; top: -100%; left: -50%; padding-bottom: 100%; border-radius: 50%; background-color: #7AE7DB; background: linear-gradient(#6FB2F2, #7AE7DB); display:block; position: absolute">
<!--Outer circle-->
</div>
<div style="height: 0%; width: 80%; top: -100%; left: -50%; padding-bottom: 80%; border-radius: 50%; background-color: #A6F5ED; display:block; position: absolute">
<!--Inner circle-->
</div>
@for (int i = 0; i < 10; i++)
{
Random r = new Random();
double right = r.Next(-25, 80);
double width = r.Next(8, 30);
var top = r.Next(-80, 40);
var degrees = r.Next(1, 360);
<div style="height: 0%; width: @width%; top: @top%; bottom: -100%; right: @right%; padding-bottom: @width%; border-radius: 50%; background-color: #7AE7DB; background: linear-gradient(@(degrees)deg, #6FB2F2, #7AE7DB); display:block; position: absolute">
<!--Outer circle-->
</div>
var width90percent = (width / 100) * 90;
var width5percent = (width / 100) * 5;
var right90percent = right + width5percent;
var topInner = top + ((width90percent / 100) * 10);
<div style="height: 0%; width: @width90percent%; top: @topInner%; bottom: -100%; right: @right90percent%; padding-bottom: @width90percent%; border-radius: 50%; background-color: #A6F5ED; display:block; position: absolute">
<!--Inner circle-->
</div>
}
<div style="position: relative; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;">
<h1 class="font-size-2em-mobile" style="color: #2e6eAa; font-weight: bold; font-size: 4em;">Random circles</h1>
<p style="color: #2e6eAa">Refresh the page to see new patterns here</p>
</div>
</div>
</div>
Purple thin circles
Simple and clean
<div style="border-radius: 5px; box-shadow: 0px 6px 20px #ccc; margin-top: 40px; margin-bottom: 40px">
<div style="border-radius: 5px; padding-top: 100px; padding-bottom: 100px; background-color: #A6F5ED; overflow: hidden; position: relative">
@for (int i = 0; i < 10; i++)
{
Random r = new Random();
double right = -10;
double width = (10 - i) * 12;
var top = -60;
var degrees = r.Next(1, 360);
<div style="height: 0%; width: @width%; top: @top%; bottom: -100%; right: @right%; padding-bottom: @width%; border-radius: 50%; background-color: #7AE7DB; background: linear-gradient(@(degrees)deg, #6FB2F2, #7AE7DB); display:block; position: absolute">
<!--Large circle-->
</div>
var widthInner = (width / 100) * 90;
var width5percent = (width / 100) * 5;
var right90percent = right + width5percent;
var top2 = top + ((widthInner / 100) * 10);
<div style="height: 0%; width: @widthInner%; top: @top2%; bottom: -100%; right: @right90percent%; padding-bottom: @widthInner%; border-radius: 50%; background-color: #A6F5ED; display:block; position: absolute">
<!--Smaller circle-->
</div>
}
<div style="position: relative; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;">
<h1 class="font-size-2em-mobile" style="color: #2e6eAa; font-weight: bold; font-size: 4em;">Purple thin circles</h1>
<p style="color: #2e6eAa">Simple and clean</p>
</div>
</div>
</div>
Blue hue circles
Bold and on theme
<div style="border-radius: 5px; box-shadow: 0px 6px 20px #ccc; margin-top: 40px; margin-bottom: 40px;">
<div style="border-radius: 5px; padding-top: 100px; padding-bottom: 100px; background-color: #229CCA; overflow: hidden; position: relative">
@{
Random r = new Random();
var color1s = new string[] { "0067B0", "1384BE", "29A6CF", "026AB2", "29A7CF", "7A6EB1", "AD9AC9", "9C67AA", "F47F60", "F8A68B" };
var color2s = new string[] { "229CCA", "52C7CE", "026AB2", "45D3E4", "0067B0", "5F5394", "7E73B4", "C285B9", "D87056", "F9A764" };
for (int i = 0; i < 10; i++)
{
double width = (10 - i) * 12;
double right = -10;
var top = -60;
var degrees = r.Next(1, 360);
<div style="height: 0%; width: @width%; top: @top%; bottom: -100%; right: @right%; padding-bottom: @width%; border-radius: 50%; background-color: #7AE7DB; background: linear-gradient(@(degrees)deg, #@color1s[i], #@color2s[i]); display:block; position: absolute">
<!--Large circle-->
</div> var widthInner = (width / 100) * 50; var widthGapInnerToOuter = (width / 100) * 20; var rightInner = right + widthGapInnerToOuter; var topInner = top + ((widthInner / 100) * 30); var degreesInner = degrees - 180;
<div style="height: 0%; width: @widthInner%; top: @topInner%; bottom: -100%; right: @rightInner%; padding-bottom: @widthInner%; border-radius: 50%; background-color: #@color1s[i]; background: linear-gradient(@(degreesInner)deg, #@color1s[i], #@color2s[i]); display:block; position: absolute">
<!--Smaller circle-->
</div>
}
}
<div style="position: relative; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;">
<h1 class="font-size-2em-mobile" style="color: #fff; font-weight: bold; font-size: 4em;">Blue hue circles</h1>
<p style="color: #eee"> Bold and on theme </p>
</div>
</div>
</div>
Offset circle pattern
A little bit different
<div style="border-radius: 5px; box-shadow: 0px 6px 20px #ccc; margin-top: 40px; margin-bottom: 40px;">
<div style="border-radius: 5px; padding-top: 100px; padding-bottom: 100px; background-color: #229CCA; overflow: hidden; position: relative">
@{
Random r = new Random();
var color1s = new string[] { "0067B0", "1384BE", "29A6CF", "026AB2", "29A7CF", "7A6EB1", "AD9AC9", "9C67AA", "F47F60", "F8A68B" };
var color2s = new string[] { "229CCA", "52C7CE", "026AB2", "45D3E4", "0067B0", "5F5394", "7E73B4", "C285B9", "D87056", "F9A764" };
for (int i = 0; i < 8; i++)
{
double width = (10 - i) * 12;
double right = -10;
var top = -60;
var degrees = r.Next(1, 360);
<div style="height: 0%; width: @width%; top: @top%; bottom: -100%; right: @right%; padding-bottom: @width%; border-radius: 50%; background-color: #7AE7DB; background: linear-gradient(@(degrees)deg, #@color1s[i], #@color2s[i]); display:block; position: absolute">
<!--Large circle-->
</div>
var widthInner = (width / 100) * 60;
var widthGapInnerToOuter = (width / 100) * 70;
var rightInner = right + widthGapInnerToOuter;
var topInner = top + ((widthInner / 100) * 30);
var degreesInner = degrees - 180;
<div style="height: 0%; width: @widthInner%; top: @topInner%; bottom: -100%; right: @rightInner%; padding-bottom: @widthInner%; border-radius: 50%; background-color: #@color1s[i]; background: linear-gradient(@(degreesInner)deg, #@color1s[i], #@color2s[i]); display:block; position: absolute">
<!--Smaller circle-->
</div>
}
}
<div style="position: relative; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;">
<h1 class="font-size-2em-mobile" style="color: #fff; font-weight: bold; font-size: 4em;">Offset circle pattern</h1>
<p style="color: #eee">A little bit different</p>
</div>
</div>
</div>
Warm color faded circles
A twist on the colour palette
<div style="margin-top: 20px; box-shadow: 0px 6px 20px #ccc; margin-bottom: 40px; border-radius: 5px;">
<div style="border-radius: 5px; padding-top: 100px; padding-bottom: 100px; background-color: #EE8E4E; overflow: hidden; position: relative">
@for (int i = 0; i & lt; 10; i++)
{
Random r = new Random();
double width = (10 - i) * 12;
double right = -10; var top = -60;
var degrees = r.Next(1, 360);
var color1 = String.Format("#{0:X6}", r.Next(0x1000000));
var color2 = String.Format("#{0:X6}", r.Next(0x1000000));
color1 = "#EBD156";
color2 = "#F91C6A";
<div style="height: 0%; width: @width%; top: @top%; bottom: -100%; right: @right%; padding-bottom: @width%; border-radius: 50%; background: linear-gradient(@(degrees)deg, @color1, @color2); display:block; position: absolute">
<!--Large circle-->
</div>
var widthInner = (width / 100) * 50;
var widthGapInnerToOuter = (width / 100) * 20;
var rightInner = right + widthGapInnerToOuter;
var topInner = top + ((widthInner / 100) * 30);
var degreesInner = degrees - 180;
<div style="height: 0%; width: @widthInner%; top: @topInner%; bottom: -100%; right: @rightInner%; padding-bottom: @widthInner%; border-radius: 50%; background-color: @color1; background: linear-gradient(@(degreesInner)deg, @color1, @color2); display:block; position: absolute">
<!--Smaller circle-->
</div>
}
<div style="position: relative; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;">
<h1 class="font-size-2em-mobile" style="color: #fff; font-weight: bold; font-size: 4em;"> Warm color faded circles</h1>
<p style="color: #eee"> A twist on the colour palette</p>
</div>
</div>
</div>
Small top
Lorem ipsum text goes here
Small blue
Lorem ipsum text goes here