Blocks - Shapes

Copy any custom block snippet below and paste it on your page to build your website easily.

Dot


                      <div className="shape bg-dot opacity-50 yellow !w-[8rem] !h-[8rem] bg-[radial-gradient(#fab758_2px,transparent_2.5px)]"></div>
  
                      <div className="shape bg-dot opacity-50 blue !w-[8rem] !h-[8rem] bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)]"></div>
  
                      <div className="shape bg-dot opacity-50 red !w-[8rem] !h-[8rem] bg-[radial-gradient(#e2626b_2px,transparent_2.5px)]"></div>
  
                      <div className="shape bg-dot opacity-50 green !w-[8rem] !h-[8rem] bg-[radial-gradient(#45c4a0_2px,transparent_2.5px)]"></div>

Line

<div className="shape bg-line yellow !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line orange !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line red !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line pink !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line violet !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line purple !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line blue !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line aqua !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line green !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line leaf !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line navy !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line fuchsia !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line sky !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line grape !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line ash !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line white !w-[8rem] !h-[8rem]"></div>
                      
<div className="shape bg-line yellow !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line orange !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line red !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line pink !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line violet !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line purple !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line blue !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line aqua !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line green !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line leaf !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line fuchsia !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line sky !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line grape !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line dark !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-line ash !rounded-[50%] !w-[8rem] !h-[8rem]"></div>

Solid

All background color options (solid, soft, pale) are available to use.

<div className="shape !bg-[#fff8ee] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#fef4f2] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-[#fcf0f1] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#fbf1f4] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#f6f3f9] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#f6f3f9] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#edf2fc] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#eff7fa] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-[#edf9f6] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#f3f8f5] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-[#ecedef] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#fdf1f8] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-[#f0f8fe] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#f0f0f8] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-[#f5f5f6] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-soft-white !w-[8rem] !h-[8rem]"></div>
                      
<div className="shape !bg-[#fff8ee] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#fef4f2] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-[#fcf0f1] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#fbf1f4] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#f6f3f9] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#f6f3f9] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#edf2fc] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#eff7fa] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-[#edf9f6] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#f3f8f5] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#fdf1f8] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-[#f0f8fe] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape !bg-[#f0f0f8] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-soft-dark !rounded-[50%] !w-[8rem] !h-[8rem]"></div>
<div className="shape bg-[#f5f5f6] !rounded-[50%] !w-[8rem] !h-[8rem]"></div>

SVG

Available color options:

primary, aqua, green, leaf, navy, orange, pink, purple, red, violet, yellow, fuchsia, sky, grape, pale-primary, pale-aqua, pale-green, pale-leaf, pale-navy, pale-orange, pale-pink, pale-purple, pale-red, pale-violet, pale-yellow, pale-fuchsia, pale-sky, pale-grape, soft-primary, soft-aqua, soft-green, soft-leaf, soft-navy, soft-orange, soft-pink, soft-purple, soft-red, soft-violet, soft-yellow, soft-fuchsia, soft-sky, soft-grape.

<div class="shape primary !w-[8rem] !h-[8rem]">
  <img src="./assets/img/svg/hex.svg" class="svg-inject icon-svg w-full !h-full" alt="" />
</div>

<div class="shape primary !w-[8rem] !h-[8rem]">
  <img src="./assets/img/svg/tri.svg" class="svg-inject icon-svg w-full !h-full" alt="" />
</div>

<div class="shape primary !w-[8rem] !h-[8rem]">
  <img src="./assets/img/svg/circle.svg" class="svg-inject icon-svg w-full !h-full" alt="" />
</div>

Doodles

image
image
image
image
image
image
image
image
image
image
image
<Image src="/assets/img/svg/doodle1.svg" className="!h-[4.5rem]" alt="">
<Image src="/assets/img/svg/doodle2.svg" className="!h-[4.5rem]" alt="">
<Image src="/assets/img/svg/doodle3.svg" className="!h-[4.5rem]" alt="">
<Image src="/assets/img/svg/doodle4.svg" className="!h-[4.5rem]" alt="">
<Image src="/assets/img/svg/doodle5.svg" className="!h-[4.5rem]" alt="">
<Image src="/assets/img/svg/doodle7.svg" className="!h-[4.5rem]" alt="">
<Image src="/assets/img/svg/doodle8.svg" className="!h-[4.5rem]" alt="">
<Image src="/assets/img/svg/doodle9.svg" className="!h-[4.5rem]" alt="">
<Image src="/assets/img/svg/doodle10.svg" className="!h-[4.5rem]" alt="">
<Image src="/assets/img/svg/doodle11.svg" className="!h-[4.5rem]" alt="">
<Image src="/assets/img/svg/doodle6.svg" className="!h-[4.5rem]" alt="">

Think unique and be creative. Make a difference with Sandbox.

Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.

Buy Sandbox
image

Sandbox

Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.

Contact Info

Moonshine St. 14/05
Light City, London
info@email.com
00 (123) 456 78 90

Learn More

Follow Us